

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>ES6笔记 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="ES6笔记">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-10-16 08:15" pubdate>
        2021年10月16日 早上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      19.1k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      249
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">ES6笔记</h1>
            
            <div class="markdown-body">
              <h1 id="前端进阶-JavaScript-ES6"><a href="#前端进阶-JavaScript-ES6" class="headerlink" title="前端进阶-JavaScript-ES6"></a>前端进阶-JavaScript-ES6</h1><p>之前学过ES5，ES的全称叫ECMAScript，它是JavaScript的一部分，主要讲提变量，数据类型，流程控制，函数，面向对象语法基础等</p>
<p>ES6全称叫ECMAScript6，也叫ECMAScript 2015，是在2015年定型发布的，它是新一代的JS的语法标准，只涉及到ES的部分，不涉及任何DOM与BOM</p>
<p>ES6主要的技术如下</p>
<ol>
<li>变量，常量</li>
<li>取值与赋值，解构</li>
<li>运算符的扩展，展开运算符，指数运算符</li>
<li>字符串的扩展</li>
<li>数组的扩展</li>
<li>函数的扩展</li>
<li>Set单值集合</li>
<li>Map健值对集合</li>
<li>对象的扩展及class关键字</li>
<li>生成器与迭代器及迭代器接口</li>
<li>反射Reflect</li>
<li>代理Proxy</li>
<li>Promise异步处理，async及await</li>
<li>ES6的模块化ESModule</li>
<li>CommonJS模块化</li>
</ol>
<hr>
<h2 id="1-let定义变量"><a href="#1-let定义变量" class="headerlink" title="1.let定义变量"></a>1.let定义变量</h2><p>之前在ES5里面，我们定义变量都是使用<code>var</code>关键字来进行的，这个关键字有几个特点要说明一下</p>
<ol>
<li><code>var</code>没有数据类型</li>
<li><code>var</code>有一个建立阶段</li>
<li><code>var</code>没有作用域，它要通过函数才能形成作用域</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//var没有数据类型</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">123</span>;<br><br><span class="hljs-comment">//var没有块级作用域</span><br>&#123;<br>    <span class="hljs-keyword">var</span> b = <span class="hljs-string">&quot;hello&quot;</span>;<br>&#125;<br><span class="hljs-built_in">console</span>.log(b);<br><br><span class="hljs-comment">//var有一个建立阶段，可以在定义之前调用</span><br><span class="hljs-built_in">console</span>.log(c);<br><span class="hljs-keyword">var</span> c = <span class="hljs-string">&quot;你好&quot;</span>;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>var在定义变量的过程当中并不是很严格</p>
</blockquote>
<p>为了解决上面的问题，ES6推出了新的关键字叫<code>let</code>用于定义变量</p>
<ol>
<li><p><code>let</code>定义的变量也没有数据类型</p>
</li>
<li><p><code>let</code>没有建立阶段，并须先定义，后使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;hello&quot;</span>;<br><span class="hljs-built_in">console</span>.log(a);			<span class="hljs-comment">//正确的</span><br><br><span class="hljs-built_in">console</span>.log(b);			<span class="hljs-comment">//这里会报错，let没有建立阶段，并须先定义后使用</span><br><span class="hljs-keyword">let</span> b = <span class="hljs-string">&quot;world&quot;</span>;<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>let</code>定义的变量是有作用域的，以花括号为作用域</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-keyword">let</span> c = <span class="hljs-string">&quot;hello&quot;</span>;<br>    <span class="hljs-built_in">console</span>.log(c);		<span class="hljs-comment">//正确的</span><br>&#125;<br><span class="hljs-built_in">console</span>.log(c);			<span class="hljs-comment">//报错，访问不到花括号里面定义的let变量</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>let</code>在同一样区域不允许重复定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-number">123</span>;<br><span class="hljs-keyword">let</span> a = <span class="hljs-number">456</span>;  <span class="hljs-comment">//这是不可以的</span><br>&#123;<br>    <span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;hello&quot;</span>;		<span class="hljs-comment">//这可以，因为在不同的区域</span><br>&#125;<br></code></pre></td></tr></table></figure>



</li>
</ol>
<h3 id="暂时性死区"><a href="#暂时性死区" class="headerlink" title="暂时性死区"></a>暂时性死区</h3><p>let有它有特点，所以在使用的时候有一些现象需要注意，这种现象叫<strong>暂时性死区</strong></p>
<p>let定义的变量是有作用域的的，所以它有区域，并且不能在定义之前调用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;hello&quot;</span>;<br>&#123;<br>    <span class="hljs-built_in">console</span>.log(a);<span class="hljs-comment">//这里没有问题的，因为内部可以使用外部的变量</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>如果代码成下面这样</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;hello&quot;</span>;<br>&#123;<br>    <span class="hljs-built_in">console</span>.log(a);			<span class="hljs-comment">//这里就形成了一个暂时性的死区</span><br>    <span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;world&quot;</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="2-const常量"><a href="#2-const常量" class="headerlink" title="2.const常量"></a>2.const常量</h2><ul>
<li>变量：可以变化的数据是变量</li>
<li>常量：不会变化的数据叫常量，如<code>Math.PI</code></li>
</ul>
<p><code>const</code>是定义常量的关键字，它具备上面的<code>let</code>的所有特点，同时又不能改变值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-string">&quot;hello&quot;</span>;<br><span class="hljs-built_in">console</span>.log(a);<br>a = <span class="hljs-string">&quot;world&quot;</span>;<br><span class="hljs-built_in">console</span>.log(a);<br><br><br><span class="hljs-keyword">const</span> b = <span class="hljs-string">&quot;标哥&quot;</span>;<br><span class="hljs-built_in">console</span>.log(b);<br>b = <span class="hljs-string">&quot;小哥哥&quot;</span>; <span class="hljs-comment">//报错</span><br></code></pre></td></tr></table></figure>

<p><strong>总结</strong>：</p>
<ol>
<li>没有建立阶段</li>
<li>会形成块级区域性，以花括号为区域</li>
<li>只能初始化赋值，后期不能再改变值</li>
</ol>
<h3 id="const的锁栈与锁堆原理"><a href="#const的锁栈与锁堆原理" class="headerlink" title="const的锁栈与锁堆原理"></a>const的锁栈与锁堆原理</h3><p>const常量的定义，它只锁栈，不锁堆</p>
<p><img src="https://pic.imgdb.cn/item/615ce7f12ab3f51d91724e87.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211005143147101"></p>
<blockquote>
<p>const定义的常量的时候一定要赋初始值，不然没有任何意义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> a ;  <span class="hljs-comment">//没有任何意义</span><br></code></pre></td></tr></table></figure>
</blockquote>
<h3 id="let与const的闭包性质"><a href="#let与const的闭包性质" class="headerlink" title="let与const的闭包性质"></a>let与const的闭包性质</h3><p>先看下面的现象</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>按钮0<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>按钮3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>按钮4<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btns = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;.btn&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; btns.length; i++) &#123;</span><br><span class="javascript">        btns[i].addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(i);</span><br><span class="javascript">        &#125;);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>根据我们的分析我们认为按钮在点击的时候应该是第0个按钮打印0，最后一个按钮打印4，结果实际情况是每个按钮都打印5。这是为什么呢？</p>
<p><strong>分析原理</strong>：在进行循环的时候，i是从0~4进行的，所以会把所有的按钮都遍历一遍，然后添加事件绑定，当i=5结束循环时，事件绑定结束。</p>
<p>直接去触发onclick的事件时候，我们要打印i，这个时候的i已经变成5了，因为var定义的变量没有区域性，打印的<code>console.log(i)</code>其实还是for循环定的的<code>var i</code>这个变量</p>
<p><strong>ES5闭包解决</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; btns.length; i++) &#123;<br>    btns[i].addEventListener(<span class="hljs-string">&quot;click&quot;</span>, (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">j</span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>            <span class="hljs-built_in">console</span>.log(j);<br>        &#125;<br>    &#125;)(i));<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>ES6的let解决</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; btns.length; i++) &#123;<br>    btns[i].addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(i);<br>    &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>分析</strong>：因为let定义的变量是有区域性的，所以上面的代码相当于循环5次，定义了5个let i</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br><span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>;<br>&#125;<br>&#123;<br><span class="hljs-keyword">let</span> i = <span class="hljs-number">1</span>;<br>&#125;<br>&#123;<br><span class="hljs-keyword">let</span> i = <span class="hljs-number">2</span>;<br>&#125;<br><span class="hljs-comment">//依次类型，每个花括号都是一个作用域，不影响外边</span><br></code></pre></td></tr></table></figure>
</blockquote>
<h2 id="3-解构"><a href="#3-解构" class="headerlink" title="3.解构"></a>3.解构</h2><p>解构是ES6里面的一个特色，它是一种特殊取值方式与赋值方式</p>
<h3 id="解构取值"><a href="#解构取值" class="headerlink" title="解构取值"></a>解构取值</h3><ol>
<li><p>数组的解构取值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>];<br> <span class="hljs-comment">/*</span><br><span class="hljs-comment">    let a = arr[0];</span><br><span class="hljs-comment">    let b = arr[1];</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">let</span> [a, b] = arr;<br><span class="hljs-built_in">console</span>.log(a);<br><span class="hljs-built_in">console</span>.log(b);<br></code></pre></td></tr></table></figure>

<p>对于复杂数组也是可以实现深度解构的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> <span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&quot;张三&quot;</span>, [<span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>]];<br><span class="hljs-comment">//解构取值 a,b,c分别取到三个值</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    let [a, temp] = arr;</span><br><span class="hljs-comment">    let [b, c] = temp;</span><br><span class="hljs-comment">    console.log(a);</span><br><span class="hljs-comment">    console.log(b);</span><br><span class="hljs-comment">    console.log(c);</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">let</span> [a, [b, c]] = arr;<br><span class="hljs-built_in">console</span>.log(a, b, c);<br></code></pre></td></tr></table></figure>

<p>解构还可以变量的交换</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-number">10</span>;<br><span class="hljs-keyword">let</span> b = <span class="hljs-number">20</span>;<br><span class="hljs-built_in">console</span>.log(a, b);<br>[a, b] = [b, a];<br><span class="hljs-built_in">console</span>.log(a, b);<br></code></pre></td></tr></table></figure>
</li>
<li><p>对象的解构取值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> userInfo = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">age</span>: <span class="hljs-number">18</span><br>&#125;<br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    let userName = userInfo.userName;</span><br><span class="hljs-comment">    let age = userInfo.age;</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">let</span> &#123;userName,age&#125; = userInfo;<br><span class="hljs-built_in">console</span>.log(userName,age)<br></code></pre></td></tr></table></figure>

<p>对象还可以进行深度的解构取值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> userInfo = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,<br>    <span class="hljs-attr">phone</span>: &#123;<br>        <span class="hljs-attr">price</span>: <span class="hljs-number">1999</span>,<br>        <span class="hljs-attr">brand</span>: <span class="hljs-string">&quot;华为&quot;</span><br>    &#125;<br>&#125;<br><span class="hljs-comment">// userName,price</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">let &#123;</span><br><span class="hljs-comment">    userName,</span><br><span class="hljs-comment">    phone</span><br><span class="hljs-comment">&#125; = userInfo;</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">let &#123;</span><br><span class="hljs-comment">    price</span><br><span class="hljs-comment">&#125; = phone;</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">let</span> &#123;<br>    userName,<br>    <span class="hljs-attr">phone</span>:&#123;<br>        price<br>    &#125;<br>&#125; = userInfo;<br><span class="hljs-built_in">console</span>.log(userName, price)<br><span class="hljs-built_in">console</span>.log(userName,price)<br></code></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h3><p>解构赋值其实主是解构取值的反向操作，这个过程只发生在对象里面。所以也叫对象的解构赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> userName = <span class="hljs-string">&quot;张三&quot;</span>;<br><span class="hljs-keyword">let</span> age = <span class="hljs-number">18</span>;<br><span class="hljs-keyword">let</span> userInfo = &#123;<br>    <span class="hljs-attr">userName</span>: userName,<br>    <span class="hljs-attr">age</span>: age<br>&#125;<br><span class="hljs-comment">/*</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">        let userInfo = &#123;</span><br><span class="hljs-comment">            userName:&quot;张三&quot;,</span><br><span class="hljs-comment">            age:18</span><br><span class="hljs-comment">        &#125;</span><br><span class="hljs-comment">*/</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码当中我们发现属性名与属性值是相同的，这个时候要注意，这种情况们完全可以简化成解构的赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> userInfo = &#123;<br>    userName,<br>    age,<br>&#125;<br><span class="hljs-built_in">console</span>.log(userInfo);<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="4-展开运算符"><a href="#4-展开运算符" class="headerlink" title="4.展开运算符"></a>4.展开运算符</h2><p>它是ES6里面新出的一个运算符，所以实现了<code>Iterable</code>这个接口的都可以使用展开运算符，目前系统ES的系统里面对象自身就实现了这个接口的只有如下几个数据类型</p>
<ol>
<li>数组</li>
<li>NodeList</li>
<li>HTMLCollection</li>
<li>Set</li>
<li>Map</li>
<li>arguments</li>
</ol>
<p>展开运算符在ES6里面使用<code>...</code>来完成</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;e&quot;</span>];<br><span class="hljs-built_in">console</span>.log(arr);<br><span class="hljs-built_in">console</span>.log(...arr);<br><span class="hljs-built_in">console</span>.log(arr[<span class="hljs-number">0</span>],arr[<span class="hljs-number">1</span>],arr[<span class="hljs-number">2</span>],arr[<span class="hljs-number">3</span>],arr[<span class="hljs-number">4</span>]);<br></code></pre></td></tr></table></figure>

<p>执行效果如下图</p>
<p><img src="https://pic.imgdb.cn/item/615ce8232ab3f51d91729e3b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211005161009223"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-number">1</span>, <span class="hljs-number">6</span>, <span class="hljs-number">4</span>, <span class="hljs-number">9</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">7</span>];<br><span class="hljs-keyword">var</span> max1 = <span class="hljs-built_in">Math</span>.max(<span class="hljs-number">1</span>, <span class="hljs-number">6</span>, <span class="hljs-number">4</span>, <span class="hljs-number">9</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">7</span>);<br><span class="hljs-built_in">console</span>.log(max1);<br><br><span class="hljs-keyword">var</span> max3 = <span class="hljs-built_in">Math</span>.max(...arr1);<br><span class="hljs-built_in">console</span>.log(max3);<br></code></pre></td></tr></table></figure>

<p>上面的代码也是展开运算符的代码</p>
<p><strong>展开运算符还可以实现数组的拷贝</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>];<br><span class="hljs-comment">// 创建一个arr2</span><br><span class="hljs-comment">// arr2的内容与arr1相同</span><br><span class="hljs-comment">// 但两个数组互不影响</span><br><span class="hljs-comment">// var arr2 = arr1.concat();</span><br><span class="hljs-comment">// var arr2 = arr1.slice();</span><br><br><span class="hljs-keyword">var</span> arr2 = [...arr1];<br></code></pre></td></tr></table></figure>

<p><strong>还可以将类数组转换成数组</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> lis = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>);<br><span class="hljs-comment">/*</span><br><span class="hljs-comment">        $(&quot;.ul1&gt;li&quot;).toArray();  //变成数组</span><br><span class="hljs-comment">*/</span><br><span class="hljs-comment">//上面的lis变成数组</span><br><span class="hljs-keyword">var</span> arr1 = <span class="hljs-built_in">Array</span>.prototype.slice.call(lis);<br><span class="hljs-keyword">var</span> arr2 = [...lis];		<span class="hljs-comment">//使用展开运算符</span><br></code></pre></td></tr></table></figure>

<hr>
<h2 id="5-字符串扩展"><a href="#5-字符串扩展" class="headerlink" title="5.字符串扩展"></a>5.字符串扩展</h2><h3 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h3><p>模板字符串是一种特殊的字符串，它使用反引号来定义</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> str1 = <span class="hljs-string">`我是一个模板字符串`</span>;<br><span class="hljs-keyword">var</span> str2 = <span class="hljs-string">`我是一个模板字符串,</span><br><span class="hljs-string">					我要换行`</span>;<br></code></pre></td></tr></table></figure>

<p>模板字符串你书写的时候是什么样式，我就是什么样子</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> letter = <span class="hljs-string">`</span><br><span class="hljs-string">    亲爱的XXX：</span><br><span class="hljs-string">        你好！</span><br><span class="hljs-string">        恭喜你！你已中了本公司特等大奖，价值9999元的礼包直接领回家！</span><br><span class="hljs-string">        您只需要交纳1999元的保证金即可领取大奖，具体详情欢迎咨询我们的客服人员</span><br><span class="hljs-string">    电话：12345678；</span><br><span class="hljs-string">    联系人：杨先生</span><br><span class="hljs-string"></span><br><span class="hljs-string">                                            XXX公司</span><br><span class="hljs-string">                                        2021-10-5 16:44:00</span><br><span class="hljs-string">`</span>;<br><br><span class="hljs-built_in">console</span>.log(letter);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615ce8662ab3f51d917308bf.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211005164537751"></p>
<p>怎么书写的就怎么生成，所以很方便</p>
<p>模板字符串最大的点就是可以快捷的实现字符串的拼接</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> nickName = <span class="hljs-string">&quot;杨佳琪&quot;</span>;<br><span class="hljs-keyword">let</span> tel = <span class="hljs-string">&quot;027-110&quot;</span>;<br><span class="hljs-keyword">let</span> concatPerson = <span class="hljs-string">&quot;李光昊先生&quot;</span>;<br><span class="hljs-keyword">let</span> companyName = <span class="hljs-string">&quot;皮皮特公司&quot;</span>;<br><br><span class="hljs-keyword">let</span> letter = <span class="hljs-string">`</span><br><span class="hljs-string">    亲爱的<span class="hljs-subst">$&#123;nickName&#125;</span>：</span><br><span class="hljs-string">        你好！</span><br><span class="hljs-string">        恭喜你！你已中了本公司特等大奖，价值9999元的礼包直接领回家！</span><br><span class="hljs-string">        您只需要交纳1999元的保证金即可领取大奖，具体详情欢迎咨询我们的客服人员</span><br><span class="hljs-string">    电话：<span class="hljs-subst">$&#123;tel&#125;</span>；</span><br><span class="hljs-string">    联系人：<span class="hljs-subst">$&#123;concatPerson&#125;</span></span><br><span class="hljs-string"></span><br><span class="hljs-string">                                            <span class="hljs-subst">$&#123;companyName&#125;</span></span><br><span class="hljs-string">                                        <span class="hljs-subst">$&#123;<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString()&#125;</span></span><br><span class="hljs-string">`</span>;<br><br><span class="hljs-built_in">console</span>.log(letter);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615ce8872ab3f51d91733ef6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211005164953464"></p>
<p><strong>模板字符串实现拼接</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> userInfo = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span><br>&#125;<br><br><span class="hljs-keyword">let</span> &#123;<br>    userName,<br>    sex<br>&#125; = userInfo;<br><span class="hljs-keyword">let</span> str1 = <span class="hljs-string">&quot;大家好，我叫&quot;</span> + userName + <span class="hljs-string">&quot;，我是一个&quot;</span> + sex + <span class="hljs-string">&quot;学生&quot;</span>;<br><span class="hljs-built_in">console</span>.log(str1);<br><br><span class="hljs-keyword">let</span> str2 = <span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>，我是一个<span class="hljs-subst">$&#123;sex&#125;</span>学生`</span>;<br><span class="hljs-built_in">console</span>.log(str2);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>模板字符串里面<code>$&#123;&#125;</code>这里面可以写任何JS代码</p>
</blockquote>
<p><strong>模板字符串的注意事项</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// alert(&quot;hello world&quot;);</span><br><span class="hljs-comment">// alert`hello world`;</span><br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好&quot;</span>);<br>&#125;<br><br>abc();<br><br>abc<span class="hljs-string">``</span>;<br><span class="hljs-comment">// 模板字符串可以当成括号去运行</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>模板字符串是可以当成方法的括号去执行</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> userName = <span class="hljs-string">&quot;张三&quot;</span>;<br><span class="hljs-keyword">let</span> age = <span class="hljs-number">18</span>;<br><span class="hljs-keyword">let</span> sex = <span class="hljs-string">&quot;男&quot;</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">arguments</span>);<br>&#125;<br><br>abc<span class="hljs-string">`xxxx<span class="hljs-subst">$&#123;userName&#125;</span>yyyy<span class="hljs-subst">$&#123;age&#125;</span>zzzzz<span class="hljs-subst">$&#123;sex&#125;</span>`</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615ce8982ab3f51d91735cf4.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211005170529832"></p>
<h3 id="字符串的扩展方法"><a href="#字符串的扩展方法" class="headerlink" title="字符串的扩展方法"></a>字符串的扩展方法</h3><ol>
<li><code>includes()</code>判断当前字符串当中是否包含某个字符串，以前使用的是<code>indexOf</code>或<code>lastIndexOf</code></li>
<li><code>repeat()</code>生成重复的字符串</li>
<li><code>trimStart()</code>去除开始的空格</li>
<li><code>trimEnd()</code>去除结束的空格</li>
</ol>
<h2 id="6-数组的扩展"><a href="#6-数组的扩展" class="headerlink" title="6.数组的扩展"></a>6.数组的扩展</h2><p>在之前的ES5里面已经学到了数组的很多方法，现在的ES6又多了很多方法</p>
<h3 id="数组扩展的方法"><a href="#数组扩展的方法" class="headerlink" title="数组扩展的方法"></a>数组扩展的方法</h3><ol>
<li><p><code>Array.of()</code>方法</p>
<p>它是数组定义的一个方法，解决了之前<code>new Array()</code>所存在的问题</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">4</span>); <span class="hljs-comment">//这代表这个数组的长度为4</span><br><br><span class="hljs-keyword">let</span> arr2 = <span class="hljs-built_in">Array</span>.of(<span class="hljs-number">4</span>); <span class="hljs-comment">//这个4代表的就是里面的元素</span><br><br><span class="hljs-keyword">let</span> arr3 = [<span class="hljs-number">4</span>];         <span class="hljs-comment">//上面的写法等价于这种写法</span><br></code></pre></td></tr></table></figure>

<p>既然等价于<code>[]</code>这种写法，那么，肯定可以同时放多个值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr4 = <span class="hljs-built_in">Array</span>.of(<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>Array.from()</code>方法</p>
<p>这一个方法可以将类数组转换成数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> lis = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>);			<span class="hljs-comment">//NodeList类型</span><br><span class="hljs-built_in">console</span>.log(lis);<br><br><span class="hljs-keyword">let</span> arr1 = <span class="hljs-built_in">Array</span>.prototype.slice.call(lis);<br><span class="hljs-keyword">let</span> arr2 = [...lis];<br><span class="hljs-keyword">let</span> arr3=<span class="hljs-built_in">Array</span>.from(lis);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>Array.prototype.fill(value:any,start?:number,end?:number)</code>填充数组的方法</p>
<p>有时候我们希望将数组的元素填充为统一的个值，这个时候就可以使用这个方法</p>
<p>vlaue代表要填充的内容，start代表填充的开始位置，end代表填充的结束位置，不包含结束位置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">100</span>);<br>arr1.fill(<span class="hljs-string">&quot;标哥&quot;</span>);<br><br><span class="hljs-keyword">let</span> arr2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">100</span>);<br>arr2.fill(<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-number">0</span>, <span class="hljs-number">20</span>);<br><br><span class="hljs-keyword">let</span> arr3 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-number">100</span>);<br>arr3.fill(<span class="hljs-string">&quot;李四&quot;</span>,<span class="hljs-number">10</span>,<span class="hljs-number">15</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>Array.prototype.flat(steps)</code>拍平一个多维数组</p>
<p>以前如果需要将多维数组拍平，我们要使用递归遍历 ，现在有了这个方法就很简单了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr1 = [<br>    <span class="hljs-string">&quot;张三&quot;</span>,<br>    [<span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>],<br>    [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, [<span class="hljs-string">&quot;c&quot;</span>, [<span class="hljs-string">&quot;d&quot;</span>,[<span class="hljs-string">&quot;e&quot;</span>]]]]<br>]<br><br><span class="hljs-keyword">let</span> arr2 = arr1.flat(<span class="hljs-literal">Infinity</span>);<br></code></pre></td></tr></table></figure>

<p>参数<code>steps</code>代表要拍平多少层，如果想把整个多维数组转换成一维数组可以直接传递一个参数<code>Infinity</code>即可</p>
</li>
<li><p><code>Array.prototype.find()</code>方法</p>
<p>该方法主要就是为了弥补数组之前的<code>indexOf</code>及<code>lastIndexOf</code>无法查找对象的问题</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs javascript">    <span class="hljs-keyword">let</span> list = [&#123;<br>            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span><br>        &#125;, &#123;<br>            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;李四&quot;</span>,<br>            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span><br>        &#125;,<br>        &#123;<br>            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;王五&quot;</span>,<br>            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span><br>        &#125;, &#123;<br>            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;赵六&quot;</span>,<br>            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span><br>        &#125;,<br>        &#123;<br>            <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;王五&quot;</span>,<br>            <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>            <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;看书&quot;</span><br>        &#125;<br>    ]<br><span class="hljs-comment">//要求，查找userName为王五的信息</span><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    let obj = undefined;</span><br><span class="hljs-comment">    for (let i = 0; i &lt; list.length; i++) &#123;</span><br><span class="hljs-comment">        if (list[i].userName == &quot;王五&quot;) &#123;</span><br><span class="hljs-comment">            obj = list[i];</span><br><span class="hljs-comment">            break;</span><br><span class="hljs-comment">        &#125;</span><br><span class="hljs-comment">    &#125;</span><br><span class="hljs-comment">*/</span><br><span class="hljs-comment">//迭代方法</span><br><span class="hljs-keyword">var</span> obj = list.find(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-comment">//返回一个条件即可</span><br>    <span class="hljs-keyword">return</span> item.userName == <span class="hljs-string">&quot;王五&quot;</span>;<br>&#125;);<br><span class="hljs-built_in">console</span>.log(obj);<br></code></pre></td></tr></table></figure>

<p>找到了就返回第一次找到的这个元素，找不到就返回undefined</p>
</li>
<li><p><code>Array.prototype.findIndex()</code>查找某一个元素的索引，这个方法上面的方法非常相似</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> index = list.findIndex(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> item.userName == <span class="hljs-string">&quot;王五&quot;</span>;<br>&#125;);<br><span class="hljs-built_in">console</span>.log(index);  <span class="hljs-comment">//2</span><br></code></pre></td></tr></table></figure>

<p>找到了就返回 次找到的索引 ，找不到就返回-1</p>
</li>
</ol>
<h3 id="for…of遍历"><a href="#for…of遍历" class="headerlink" title="for…of遍历"></a>for…of遍历</h3><p>of的遍历与之前的<code>in</code>的遍历是相同的，<u>只是<code>for...in</code>称之为有序遍历（索引的时候是依靠索引的）,而<code>for...of</code>称之为无序遍历（遍历的时候不需要索引）</u></p>
<blockquote>
<p>for…of是基于属性值的遍历，但是并不是所有的对象都可以使用它进行遍历 ，如果要使用for…of遍历 ，则这个对象必须实现<code>Iterable</code>接口</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>,<span class="hljs-string">&quot;c&quot;</span>,<span class="hljs-string">&quot;d&quot;</span>,<span class="hljs-string">&quot;e&quot;</span>];<br><span class="hljs-comment">// 基于属性名的遍历 ，相当于的索引的遍历</span><br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i <span class="hljs-keyword">in</span> arr)&#123;<br>    <span class="hljs-built_in">console</span>.log(arr[i]);<br>&#125;<br><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;------------&quot;</span>);<br><span class="hljs-comment">//for...of是基于属性值的遍历，也就不需要索引</span><br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i <span class="hljs-keyword">of</span> arr)&#123;<br>    <span class="hljs-built_in">console</span>.log(i);<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="7-Set单值集合"><a href="#7-Set单值集合" class="headerlink" title="7.Set单值集合"></a>7.Set单值集合</h2><p>Set是ES6里面新堆出的一各数据结构 ，它是一种单值集合，没有属性名（没有索引，没有key），并且是一个不重复的集合</p>
<h4 id="Set的创建"><a href="#Set的创建" class="headerlink" title="Set的创建"></a>Set的创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>();  <span class="hljs-comment">//创建了一个空的Set集合</span><br><br><span class="hljs-keyword">let</span> s2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>([<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>,<span class="hljs-string">&quot;c&quot;</span>,<span class="hljs-string">&quot;d&quot;</span>]);<br><br><span class="hljs-keyword">let</span> s3 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>([<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>]);	  <span class="hljs-comment">//不能重复，所以得到的是a,b,c</span><br></code></pre></td></tr></table></figure>

<h4 id="Set的相关方法"><a href="#Set的相关方法" class="headerlink" title="Set的相关方法"></a>Set的相关方法</h4><ol>
<li><p><code>add()</code>向Set集合里面添加新的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>([<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>]);<br>s1.add(<span class="hljs-string">&quot;你好&quot;</span>);<br>s1.add(<span class="hljs-number">123</span>).add(<span class="hljs-string">&quot;标哥哥&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>delete()</code>向Set集合中删除这个元素，返回布尔值删除结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> result = s1.delete(<span class="hljs-string">&quot;b&quot;</span>);<br><span class="hljs-comment">//result是删除的结果，如果为true代表删除成功，false代表删除失败</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>has()</code>判断Set集合当中有没有指定元素，返回布尔值 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> result1 = s1.has(<span class="hljs-number">123</span>);   	  <span class="hljs-comment">//true</span><br><span class="hljs-keyword">let</span> result2 = s1.has(<span class="hljs-string">&quot;张三&quot;</span>);		<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>size</code>属性，表示Set集中元素的个数</p>
</li>
<li><p><code>clear()</code>方法，清空当前的集合</p>
</li>
<li><p><code>values()</code>方法，返回当前Set集合中值的迭代器<code>Iterator</code></p>
</li>
<li><p><code>keys()</code>方法，返回当前Keys集合中的键的迭代器<code>Iterator</code>，<strong>但是Set没有键，所以返回的仍然是<code>values()</code>的结果</strong></p>
</li>
</ol>
<h4 id="set的遍历"><a href="#set的遍历" class="headerlink" title="set的遍历"></a>set的遍历</h4><p>Set因为是单值的无序集合，所以没有索引，那么就不能使用<code>for...in</code>进行遍历，而<code>for...of</code>是基于属性名的遍历，它不需要索引（属性值），同时Set又实现了<code>Iterable</code>接口，所以它是完全可以使用<code>for...of</code>的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>([<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;d&quot;</span>, <span class="hljs-string">&quot;标哥哥&quot;</span>, <span class="hljs-number">123</span>]);<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> s1)&#123;<br>    <span class="hljs-built_in">console</span>.log(item);<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="Set的扩展"><a href="#Set的扩展" class="headerlink" title="Set的扩展"></a>Set的扩展</h4><p><strong>使用Set对数组去重</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * Set实现了Iterable接口</span><br><span class="hljs-comment">     * 实现了接口就可以使用for...of和...展开运算符</span><br><span class="hljs-comment">     * Set不能重复</span><br><span class="hljs-comment">*/</span><br><br><br><span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>,<span class="hljs-string">&quot;c&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>,<span class="hljs-string">&quot;e&quot;</span>,<span class="hljs-string">&quot;a&quot;</span>];<br><span class="hljs-comment">//请将上面的数组去重</span><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>(arr);<br><span class="hljs-keyword">let</span> arr1 = [...s1];<br></code></pre></td></tr></table></figure>

<h2 id="8-Map键值对集合"><a href="#8-Map键值对集合" class="headerlink" title="8.Map键值对集合"></a>8.Map键值对集合</h2><p>Map集合是相对于上面的Set的单值集合存在的，它是键值对的存储，它结合了Set的存储特点（存取速度快），也解决了<code>Set</code>的获取缺点（获取速度慢）</p>
<p>Map集合当中的键是不允许重复的，值可以重复</p>
<h3 id="Map的创建"><a href="#Map的创建" class="headerlink" title="Map的创建"></a>Map的创建</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span>  m1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>();<br><span class="hljs-comment">//直接静态初始化</span><br><span class="hljs-keyword">let</span> m2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>([<br>    [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;张三&quot;</span>],<br>    [<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>],<br>    [<span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>]<br>]);<br><span class="hljs-comment">//键不会重复，值只可以重复，键同名时，后面出现的值覆盖前面出现的值</span><br><span class="hljs-keyword">let</span> m3 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>([<br>    [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;张三&quot;</span>],<br>    [<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>],<br>    [<span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>],<br>    [<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">12345</span>],<br>    [<span class="hljs-number">1</span>, <span class="hljs-string">&quot;张三&quot;</span>],<br>    [<span class="hljs-number">2</span>, &#123;<br>        <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span><br>    &#125;],<br>    [<span class="hljs-string">&quot;e&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span>)<br>    &#125;]<br>])<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码分析</strong>：</p>
<ol>
<li>键不能重复，值可以重复</li>
<li>键与值都可以是任意数据类型</li>
</ol>
</blockquote>
<h3 id="Map的相关方法"><a href="#Map的相关方法" class="headerlink" title="Map的相关方法"></a>Map的相关方法</h3><ol>
<li><p><code>size</code>属性，用于描述当前Map集合当中有多少对元素</p>
</li>
<li><p><code>set(k,v)</code>方法，用于向Map集合当中添加一对元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> m1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>();<br><br>m1.set(<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;标哥哥&quot;</span>);<br>m1.set(<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>).set(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;王五&quot;</span>);<br>m1.set(<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;小帅哥&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>get(k)</code>方法，通过一个键向Map集合当中取一个值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> x =  m1.get(<span class="hljs-string">&quot;a&quot;</span>);<br><span class="hljs-keyword">var</span> y = m1.get(<span class="hljs-number">1</span>);<br></code></pre></td></tr></table></figure>

<p><strong>取到了就有值 ，取不到就是<code>undefined</code></strong></p>
</li>
<li><p><code>delete(k)</code>方法，通过一个键去删除一对元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">m1.delete(<span class="hljs-string">&quot;b&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>clear()</code>方法，清空当前的Map集合</p>
</li>
<li><p><code>keys()</code>方法，获取当前Map中所有Key的集合，返回的是一个<code>Iterator</code>的接口</p>
</li>
<li><p><code>values()</code>方法，返回当前Map中所有Value的集合，返回的是一个<code>Iterator</code>的接口</p>
</li>
<li><p><code>entries()</code>方法，返回当前Map中的key-value集合，返回的是一个<code>Iterator</code>的接口</p>
</li>
</ol>
<h3 id="Map的遍历"><a href="#Map的遍历" class="headerlink" title="Map的遍历"></a>Map的遍历</h3><p>Map是实现了迭代器接口的，所以可以使用<code>for...of</code>去遍历 ，但是Map是散列存储，没有索引的说法，<strong>所以还是不能用for…in</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> m1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>();<br>m1.set(<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;小帅哥&quot;</span>);<br>m1.set(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;王五&quot;</span>);<br><br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> m1)&#123;<br>    <span class="hljs-built_in">console</span>.log(item);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615d7fb52ab3f51d91a713bb.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211006115528448"></p>
<p>这个时候的<code>item</code>代表的就是<code>key </code>和<code>value</code>的一个组合，这个时候我们可以直接使用解构来进行遍历这样更方便</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> [k, v] <span class="hljs-keyword">of</span> m1) &#123;<br>    <span class="hljs-built_in">console</span>.log(k,v);<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="Map的扩展"><a href="#Map的扩展" class="headerlink" title="Map的扩展"></a>Map的扩展</h3><p>之前所讲的Set所对应的是数组，那么Map所对应的其实就是对象，因为对象也是键值对的存储方式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> m3 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>([<br>    [<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;张三&quot;</span>],<br>    [<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;李四&quot;</span>],<br>    [<span class="hljs-string">&quot;c&quot;</span>, <span class="hljs-string">&quot;王五&quot;</span>],<br>    [<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">12345</span>],<br>    [<span class="hljs-number">1</span>, <span class="hljs-string">&quot;张三&quot;</span>],<br>    [<span class="hljs-number">2</span>, &#123;<br>        <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span><br>    &#125;],<br>    [<span class="hljs-string">&quot;e&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span>)<br>    &#125;]<br>]);<br><span class="hljs-comment">//如果上面的键值对转变成对象</span><br><span class="hljs-keyword">let</span> obj3 = &#123;<br>    <span class="hljs-attr">a</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">b</span>: <span class="hljs-string">&quot;李四&quot;</span>,<br>    <span class="hljs-attr">c</span>: <span class="hljs-string">&quot;王五&quot;</span>,<br>    <span class="hljs-attr">b</span>: <span class="hljs-number">12345</span>,<br>    [<span class="hljs-number">1</span>]: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-string">&quot;2&quot;</span>: &#123;<br>        <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span><br>    &#125;,<br>    <span class="hljs-attr">e</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello&quot;</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="9-函数的扩展"><a href="#9-函数的扩展" class="headerlink" title="9.函数的扩展"></a>9.函数的扩展</h2><p>在之前的ES5里面，我们已经学过了很多的函数</p>
<ol>
<li>构造函数</li>
<li>普通函数</li>
<li>立即执行函数</li>
<li>回调函数</li>
<li>递归函数 </li>
<li>匿名函数</li>
</ol>
<p>现在在ES6当中，又对函数做了扩展</p>
<h3 id="无构造函数的函数"><a href="#无构造函数的函数" class="headerlink" title="无构造函数的函数"></a>无构造函数的函数</h3><blockquote>
<p>官方的说法叫成员函数，属性函数</p>
</blockquote>
<p>在之前的ES5里面，我们所有通过<code>function</code>定义的东西都叫函数，<u>所有通过<code>function</code>定义的函数都具备构造函数的特点，也就是都可以通过<code>new</code>去调用</u></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj = &#123;<br>    <span class="hljs-attr">abc</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;abc&quot;</span>);<br>    &#125;<br>&#125;<br><br>obj.abc(); <span class="hljs-comment">//普通调用</span><br><span class="hljs-keyword">new</span> obj.abc(); <span class="hljs-comment">//构造函数调用</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码当中，我们可以看到<code>abc</code>的方法本来应该是属于对象<code>obj</code>的，它就应该是通过<code>obj.abc()</code>来调用，而不应该通过构造函数的<code>new</code>调用</p>
<p>这了解决这种歧义，ES6就必改变了这种函数的定义方式，<strong>直接废弃关键字<code>function</code></strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj = &#123;<br>    <span class="hljs-function"><span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;abc&quot;</span>);<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;你好啊&quot;</span>)<br>    &#125;<br>&#125;<br><br>obj.abc();           <span class="hljs-comment">//普通调用，正常执行</span><br><span class="hljs-keyword">new</span> obj.abc();       <span class="hljs-comment">//这里会报，它不能以构造函数执行</span><br></code></pre></td></tr></table></figure>

<h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3><p>在之前我们如果要定义函数需要使用到关键字<code>function</code>，但是现在我们已经不推荐大家使用这个关键，那么下面定义这种方法怎么办呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello world&quot;</span>);<br>&#125;<br><br><span class="hljs-keyword">var</span> abc = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello world&quot;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>对于上面的情况，ES6也推出解决办法，使用<code>箭头函数</code></p>
<h4 id="箭头函数的参数"><a href="#箭头函数的参数" class="headerlink" title="箭头函数的参数"></a>箭头函数的参数</h4><p><strong>无参数的箭头函数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> abc = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello world&quot;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>有一个参数的箭头函数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">userName</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>`</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>上面的函数如果转换成箭头函数呢</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function"><span class="hljs-params">userName</span> =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>`</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>有多个参数的箭头函数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">userName,age</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>,我今年<span class="hljs-subst">$&#123;age&#125;</span>岁了`</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>对于上面的函数，如果有多个参数，则括号不能省略</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function">(<span class="hljs-params">userName, age</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>,我今年<span class="hljs-subst">$&#123;age&#125;</span>岁了`</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="箭头函数的返回值"><a href="#箭头函数的返回值" class="headerlink" title="箭头函数的返回值"></a>箭头函数的返回值</h4><p>先看下面的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello world&quot;</span>);<br>&#125;<br><span class="hljs-keyword">const</span> b = <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;hello world&quot;</span>);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<p>在上面的代码当中，两个函数都只有一行代码，并且两个函数都没有返回值 ，所以可以花括号省略掉</p>
<p>两个函数没有任何区别</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;标哥哥&quot;</span>;<br>&#125;<br><br><span class="hljs-keyword">const</span> b = <span class="hljs-function">() =&gt;</span> <span class="hljs-string">&quot;标哥哥&quot;</span>;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，如果箭头函数省略了<code>&#123;&#125;</code>花括号，则花括号后面的代码就会默认做为返回值来返回到函数的外边，a函数与b函数实现的功能是一样的</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">9</span>, <span class="hljs-number">4</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>];<br><span class="hljs-comment">//找出偶数项形成新的数组</span><br><br><span class="hljs-comment">//第一步：常规写法</span><br><span class="hljs-keyword">let</span> arr1 = arr.filter(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>;<br>&#125;);<br><br><span class="hljs-comment">//第二步：使用最基本的箭头函数</span><br><span class="hljs-keyword">let</span> arr2 = arr.filter(<span class="hljs-function">(<span class="hljs-params">item, index, _arr</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>;<br>&#125;);<br><br><span class="hljs-comment">//第三步：省略花括号，省略return</span><br><span class="hljs-keyword">let</span> arr3 = arr.filter(<span class="hljs-function">(<span class="hljs-params">item, index, _arr</span>) =&gt;</span> item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>);<br><br><span class="hljs-comment">//第四步：只需要item参数，就只给item参数就可以了</span><br><span class="hljs-keyword">let</span> arr4 = arr.filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>);<br></code></pre></td></tr></table></figure>

<h4 id="箭头函数的注意事项"><a href="#箭头函数的注意事项" class="headerlink" title="箭头函数的注意事项"></a>箭头函数的注意事项</h4><ol>
<li><p>箭头函数不具备构造函数的特点，不能通过<code>new</code>来调用</p>
</li>
<li><p>箭头函数里面没有<code>arguments</code></p>
</li>
<li><p>箭头函数绑定的是外边的<code>this</code>,它自身内部是没有<code>this</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> userName = <span class="hljs-string">&quot;全局的李四&quot;</span>;<br><span class="hljs-keyword">let</span> obj1 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.userName); <span class="hljs-comment">//张三</span><br>        <span class="hljs-comment">/*</span><br><span class="hljs-comment">            setTimeout(function()&#123;</span><br><span class="hljs-comment">                console.log(this.userName);     //李四</span><br><span class="hljs-comment">            &#125;,2000);</span><br><span class="hljs-comment">            */</span><br>        <span class="hljs-comment">/*</span><br><span class="hljs-comment">             var that = this;</span><br><span class="hljs-comment">             setTimeout(function() &#123;</span><br><span class="hljs-comment">                 console.log(that.userName);</span><br><span class="hljs-comment">             &#125;, 2000);</span><br><span class="hljs-comment">             */</span><br><br>        <span class="hljs-comment">/*</span><br><span class="hljs-comment">             setTimeout(function()&#123;</span><br><span class="hljs-comment">                console.log(this.userName);</span><br><span class="hljs-comment">             &#125;.bind(this),2000);</span><br><span class="hljs-comment">             */</span><br><br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-comment">//这个地方的this就是外边的this,也就是obj1对象</span><br>            <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.userName);<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615d80a22ab3f51d91a89f87.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211006150801414"></p>
</li>
</ol>
<p>下面的代码的情况是绝对不允许存在的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> userName = <span class="hljs-string">&quot;全局的李四&quot;</span>;<br><span class="hljs-keyword">let</span> obj = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.userName);     <span class="hljs-comment">//张三</span><br>    &#125;,<br>    <span class="hljs-attr">abc</span>: <span class="hljs-function">() =&gt;</span> &#123;   <span class="hljs-comment">//不能这么写</span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.userName);     <span class="hljs-comment">//全局的李四</span><br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>箭头函数继承父执行上下文中的this</p>
</blockquote>
<h2 id="10-ES6函数的参数"><a href="#10-ES6函数的参数" class="headerlink" title="10.ES6函数的参数"></a>10.ES6函数的参数</h2><h3 id="函数的默认参数"><a href="#函数的默认参数" class="headerlink" title="函数的默认参数"></a>函数的默认参数</h3><p>在之前如果我们定义函数的时候，可以放置参数，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">userName, age</span>) </span>&#123;<br>    <span class="hljs-comment">// 如果age没有传，就默认是18,怎么办</span><br>    age = age || <span class="hljs-number">18</span>;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好，我叫&quot;</span> + userName + <span class="hljs-string">&quot;，我的年龄是&quot;</span> + age + <span class="hljs-string">&quot;岁了&quot;</span>);<br>&#125;<br><br>sayHello(<span class="hljs-string">&quot;杨标&quot;</span>, <span class="hljs-number">22</span>);<br>sayHello(<span class="hljs-string">&quot;标哥哥&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>在上面的代码当中，我们可以看到，如果想要设置一个默认的参数，则需要使用我们的运算符在函数内部进行，现在在ES6里面，则可以直接设置函数的默认值了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">userName, age = <span class="hljs-number">18</span></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好，我叫&quot;</span> + userName + <span class="hljs-string">&quot;，我的年龄是&quot;</span> + age + <span class="hljs-string">&quot;岁了&quot;</span>);<br>&#125;<br>sayHello(<span class="hljs-string">&quot;杨标&quot;</span>, <span class="hljs-number">22</span>);<br>sayHello(<span class="hljs-string">&quot;标哥哥&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>完全转换成ES6的写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function">(<span class="hljs-params">userName, age = <span class="hljs-number">18</span></span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好， 我叫<span class="hljs-subst">$&#123;userName&#125;</span>，我的年龄是<span class="hljs-subst">$&#123;age&#125;</span>岁了`</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>多个默认参数也是可以的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function">(<span class="hljs-params">userName, sex = <span class="hljs-string">&quot;女&quot;</span>, age = <span class="hljs-number">18</span></span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我叫<span class="hljs-subst">$&#123;userName&#125;</span>,我的性别是<span class="hljs-subst">$&#123;sex&#125;</span>,我的年龄是<span class="hljs-subst">$&#123;age&#125;</span>`</span>);<br>&#125;<br><br>sayHello(<span class="hljs-string">&quot;杨佳琪&quot;</span>);<br>sayHello(<span class="hljs-string">&quot;杨标&quot;</span>,<span class="hljs-string">&quot;男&quot;</span>,<span class="hljs-number">22</span>);<br></code></pre></td></tr></table></figure>

<p><span style="color:red;font-weight:bold">注意事项：</span>默认参数只能放在所有参数的最后面</p>
<h3 id="函数的剩余参数"><a href="#函数的剩余参数" class="headerlink" title="函数的剩余参数"></a>函数的剩余参数</h3><p>在ES6里面，我们的函数已经没有<code>arguments</code>了，但是如果我们想实现类似于这样的实参集合怎么办呢？这个时候我们可以使用ES6里面的新东西，剩余参数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function">(<span class="hljs-params">userName, hobby</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>`</span>);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的爱好是：<span class="hljs-subst">$&#123;hobby&#125;</span>`</span>);<br>&#125;<br><br>sayHello(<span class="hljs-string">&quot;标哥哥&quot;</span>, <span class="hljs-string">&quot;看书&quot;</span>);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：在上面的代码里面，我们实现了打印用户名和爱好的功能</p>
<p>问题：如果有多个爱好呢？</p>
</blockquote>
<p>为了解决上面的问题，我们尝试着定义多个爱好的参数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function">(<span class="hljs-params">userName, hobby1,hobby2</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>`</span>);<br><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的爱好是：<span class="hljs-subst">$&#123;hobby1&#125;</span>-<span class="hljs-subst">$&#123;hobby2&#125;</span>`</span>);<br>&#125;<br><br><br>sayHello(<span class="hljs-string">&quot;标哥哥&quot;</span>,<span class="hljs-string">&quot;看书&quot;</span>,<span class="hljs-string">&quot;睡觉&quot;</span>);<br>sayHello(<span class="hljs-string">&quot;王奥东&quot;</span>,<span class="hljs-string">&quot;玩游戏&quot;</span>);						<span class="hljs-comment">//这里就有问题了，因为第二个参数没有参</span><br>sayHello(<span class="hljs-string">&quot;方华升&quot;</span>,<span class="hljs-string">&quot;刷抖音&quot;</span>,<span class="hljs-string">&quot;看段子&quot;</span>,<span class="hljs-string">&quot;做饭&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/615d819b2ab3f51d91aa7a29.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211006155816943"></p>
<p>有了一个像上面的现象以后，我们无比的怀念<code>arguments</code>，但是ES6的函数里面又没有</p>
<p>这个时候你需要使用到<strong>剩余参数</strong>的技术</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> sayHello = <span class="hljs-function">(<span class="hljs-params">userName, ...hobby</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;userName&#125;</span>`</span>);<br>    <span class="hljs-comment">// 这里面的hobby是一个数组</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的爱好有：<span class="hljs-subst">$&#123;hobby.join(<span class="hljs-string">&quot;-&quot;</span>)&#125;</span>`</span>);   <br>&#125;<br><br>sayHello(<span class="hljs-string">&quot;李光昊&quot;</span>);<br>sayHello(<span class="hljs-string">&quot;标哥哥&quot;</span>, <span class="hljs-string">&quot;看书&quot;</span>, <span class="hljs-string">&quot;睡觉&quot;</span>);<br>sayHello(<span class="hljs-string">&quot;王奥东&quot;</span>, <span class="hljs-string">&quot;玩游戏&quot;</span>);<br>sayHello(<span class="hljs-string">&quot;方华升&quot;</span>, <span class="hljs-string">&quot;刷抖音&quot;</span>, <span class="hljs-string">&quot;看段子&quot;</span>, <span class="hljs-string">&quot;做饭&quot;</span>);<br></code></pre></td></tr></table></figure>

<h2 id="11-class关键字"><a href="#11-class关键字" class="headerlink" title="11.class关键字"></a>11.class关键字</h2><p>在上面的函数的扩展里面，无论是新增的成员函数【属性函数】或是箭头函数，这种函数都不能使用构造函数的<code>new</code>去调用，那么如果我们想定义一个构造函数怎么办呢？这个时候ES6推出了新的关键字叫<code>class</code></p>
<h3 id="class关键字的认识"><a href="#class关键字的认识" class="headerlink" title="class关键字的认识"></a>class关键字的认识</h3><p><strong>ES5的构造函数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params">userName, sex</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.userName = userName;<br>    <span class="hljs-built_in">this</span>.sex = sex;<br>&#125;<br><br><span class="hljs-keyword">var</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>);         <span class="hljs-comment">//得到s1对象</span><br><span class="hljs-keyword">var</span> s2 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;男&quot;</span>);         <span class="hljs-comment">//得到s2的对象</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：上面的代码当中，我们把Student当成了构造函数去执行，但是Student也是可以做为普通函数去执行的，这样在ES5里面非常不严谨，所以ES6要改变</p>
<p>ES6从语法上面就已经严格的区分了普通函数与构造函数，像之前成员函数或箭头函数都称之为普通函数，不能当成构造函数执行，同时ES6也有专门创建构造函数的方法</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span></span>&#123;<br><br>&#125;<br><span class="hljs-keyword">typeof</span> Student; <span class="hljs-comment">//function  </span><br></code></pre></td></tr></table></figure>

<p>上面的函数是不能够能够 <code>Student()</code>来调用的，它必须以构造函数<code>new</code>的形式调用，否则报错</p>
<p><img src="https://pic.imgdb.cn/item/615d82d72ab3f51d91acc0b5.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211006162025483"></p>
<p><strong>ES6的写法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>&#123;<br>    <span class="hljs-comment">//constructor是在new调用的一瞬间 ,自动执行的</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>&#125;<br><span class="hljs-keyword">var</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>);         <span class="hljs-comment">//得到s1对象</span><br><span class="hljs-keyword">var</span> s2 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;李四&quot;</span>, <span class="hljs-string">&quot;男&quot;</span>);         <span class="hljs-comment">//得到s2的对象</span><br></code></pre></td></tr></table></figure>

<h3 id="constructor的认识"><a href="#constructor的认识" class="headerlink" title="constructor的认识"></a>constructor的认识</h3><p><code>constructor</code>全称叫构造器，它是class在创建对象过程当中的<strong>必不可少</strong>的东西，在new的一瞬间自动执行</p>
<p><strong>ES5的代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params"></span>)</span>&#123;<br><br>&#125;<br><br><span class="hljs-keyword">var</span> s1 = <span class="hljs-keyword">new</span> Student();<br></code></pre></td></tr></table></figure>

<p>下面使用ES6的代码写一次</p>
<p><strong>ES6的代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br><br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student();<br></code></pre></td></tr></table></figure>

<p>这个时候我们发现<code>constructor</code>里面什么都没有，那么我们就可以省略这个东西</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span></span>&#123;<br>	<span class="hljs-comment">//这里没有写constructor,  但是它又必不可少，所以它会帮你自动添加      </span><br>&#125;<br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student();<br></code></pre></td></tr></table></figure>

<h3 id="class里面的方法定义"><a href="#class里面的方法定义" class="headerlink" title="class里面的方法定义"></a>class里面的方法定义</h3><p>在之前就已经讲过，对象里面的方法应该是成员方法，不能被构造执行，所以要定义的时候是有约束的</p>
<p><strong>ES5的代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Student</span>(<span class="hljs-params">userName, sex</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.userName = userName;<br>    <span class="hljs-built_in">this</span>.sex = sex;<br>    <span class="hljs-built_in">this</span>.sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好,我叫&quot;</span> + <span class="hljs-built_in">this</span>.userName + <span class="hljs-string">&quot;,我的性别是&quot;</span> + <span class="hljs-built_in">this</span>.sex);<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">var</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;标哥&quot;</span>, <span class="hljs-string">&quot;男&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><strong>ES6里面的代码</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好,我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>,我的性别是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sex&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><span class="hljs-keyword">var</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;标哥&quot;</span>, <span class="hljs-string">&quot;男&quot;</span>);<br></code></pre></td></tr></table></figure>

<h3 id="class里面的访问器属性get-set"><a href="#class里面的访问器属性get-set" class="headerlink" title="class里面的访问器属性get/set"></a>class里面的访问器属性get/set</h3><p>在之前的ES5里面，我们大量的使用了访问器属性，并通过get/set来实现了一些属性的联动。在ES6里面，这个功用得到了扩展，如下</p>
<p><strong>下面的代码是正常的方法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">firstName, lastName</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.firstName = firstName;<br>        <span class="hljs-built_in">this</span>.lastName = lastName;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">userName</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.firstName + <span class="hljs-built_in">this</span>.lastName;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张&quot;</span>, <span class="hljs-string">&quot;小二&quot;</span>);<br><span class="hljs-keyword">let</span> name1 = s1.userName();			<span class="hljs-comment">//这里的userName是一个方法</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面有个问题，我们的<code>userName</code>表现出来的是方法，而不是属性</p>
<p><strong>ES6里面的访问器属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">firstName, lastName</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.firstName = firstName;<br>        <span class="hljs-built_in">this</span>.lastName = lastName;<br>    &#125;<br>    <span class="hljs-keyword">get</span> <span class="hljs-title">userName</span>() &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.firstName + <span class="hljs-built_in">this</span>.lastName;<br>    &#125;<br>    <span class="hljs-keyword">set</span> <span class="hljs-title">userName</span>(<span class="hljs-params">v</span>) &#123;<br>        <span class="hljs-built_in">this</span>.firstName = v[<span class="hljs-number">0</span>];<br>        <span class="hljs-built_in">this</span>.lastName = v.slice(<span class="hljs-number">1</span>);<br>    &#125;<br>&#125;<br><span class="hljs-keyword">let</span> s1=<span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;范&quot;</span>,<span class="hljs-string">&quot;绪超&quot;</span>);<br><span class="hljs-keyword">let</span> name= s1.getUserName;    <span class="hljs-comment">//访问器属性   name为&quot;范绪超&quot;</span><br>s1.setUserName=<span class="hljs-string">&quot;龚开&quot;</span>;   <span class="hljs-comment">//不是函数  v就是赋的值</span><br><span class="hljs-keyword">let</span> name2= s1.getUserName;    <span class="hljs-comment">//name2为&quot;龚开&quot;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>get/set共同修改访问器属性，get是在取值的时候自动调用，set是在赋值的时候自动调用，参数就是赋的值。</p>
</blockquote>
<h3 id="class里面的关键字static"><a href="#class里面的关键字static" class="headerlink" title="class里面的关键字static"></a>class里面的关键字static</h3><p>static的关键字在其它的编程里面都存在，主要作用是构建静态的东西，在ES6里面，static的语法与其它语法基本相同</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = <span class="hljs-string">&quot;张三&quot;</span>;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好， 我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>`</span>);<br>    &#125;<br>    <span class="hljs-comment">//静态方法</span><br>    <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-title">study</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我在学习&quot;</span>);<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.userName);		<span class="hljs-comment">//undefined;</span><br>    &#125;<br>    <br>    <span class="hljs-comment">//静态属性</span><br>    <span class="hljs-keyword">static</span> age = <span class="hljs-number">18</span>;<br>&#125;<br><br><br><span class="hljs-comment">//sayHello做为构造函数Student里面的普通方法，如果要使用必须要先new出一个对象</span><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student();<br>s1.sayHello();<br><br><span class="hljs-comment">//如果是表达方法，不需要new,直接通过构造函数名调用就可以了</span><br>Student.study();<br><span class="hljs-built_in">console</span>.log(Student.age);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>对于class里面的普通函数，我们是需要先new出一个对象，然后再通过这个对象来调用里面的方法；</p>
<p>对于class里面的静态方法，我们可以直接使用构造函数名<code>Student</code>来调用</p>
<p>静态的函数不能使用非静态的变量或方法</p>
</blockquote>
<p>所以我们得出一个结论，在<code>class</code>里面，如果有一个方法或属性是通过静态的<code>static</code>修饰的，则不需要<code>new</code>出对象就直接通过构造函数名调用</p>
<h2 id="12-extends关键字"><a href="#12-extends关键字" class="headerlink" title="12.extends关键字"></a>12.extends关键字</h2><p>在之前的ES5里面，我们使用<code>function</code>来创建构造函数，然后通过原型prototype或<code>__proto__</code>来继承对象，这样做很麻烦 ，也很不好理解，现在在ES6里面，我们已经有了<code>class</code>关键字来创建构造函数，现在继续也有新的关键字，它就是<code>extends</code></p>
<h3 id="无参数的继承"><a href="#无参数的继承" class="headerlink" title="无参数的继承"></a>无参数的继承</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是一个人&quot;</span>)<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">//让Student继承自Person</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">study</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我在学习&quot;</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student();<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们让Student 继承自 Person，同时两个构造函数都没有参数， 所以都省略了<code>constructor</code>这个东西</p>
</blockquote>
<p>如果我们不想省略，自己写呢，则应该是下面的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-comment">//这里没有使用extends关键字，所以与之前没有什么区别 </span><br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是一个人&quot;</span>)<br>    &#125;<br>&#125;<br><br><span class="hljs-comment">//让Student继承自Person</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-comment">//先有父级，再有儿子</span><br>        <span class="hljs-built_in">super</span>();<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">study</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我在学习&quot;</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student();<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码分析</strong>：如果使用了<code>extends</code>继承的，想自己手动的写<code>constructor</code>，则一定要注意，要先调用<code>super</code></p>
<p><code>super</code>指的是父级</p>
</blockquote>
<h3 id="有参数的继承"><a href="#有参数的继承" class="headerlink" title="有参数的继承"></a>有参数的继承</h3><p>在上面的代码里面，我们可以看到两个构造函数都没有参数，如果它们有参数呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好， 我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>,我的性别是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sex&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex, sid</span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>(userName, sex);<br>        <span class="hljs-built_in">this</span>.sid = sid;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">study</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的学号是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sid&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>, <span class="hljs-string">&quot;H21030003&quot;</span>);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>如果构造函数是要接收参数的，则<code>constructor</code>一定要是自己写的，写的时候要注意 ，<code>super</code>一定是最先出来的，this要在super的后面</p>
</blockquote>
<h3 id="静态的继承"><a href="#静态的继承" class="headerlink" title="静态的继承"></a>静态的继承</h3><p>之前讲过在<code>class</code>里面除了普通的属性及方法以外，还有<code>static</code>静态的属性及方法，静态的东西是否可以通过<code>extends</code>继承呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好， 我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>,我的性别是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sex&#125;</span>`</span>);<br>    &#125;<br>    <span class="hljs-keyword">static</span> hobby = <span class="hljs-string">&quot;看书，睡觉&quot;</span>;<br>    <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我是静态的方法<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.hobby&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex, sid</span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>(userName, sex);<br>        <span class="hljs-built_in">this</span>.sid = sid;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">study</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的学号是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sid&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张三&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>, <span class="hljs-string">&quot;H21030003&quot;</span>);<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码分析</strong>：</p>
<ol>
<li>静态的属性可以继承，静态的方法也可以继承</li>
<li>静态的与非静态的仍然是隔离的</li>
<li>静态的方法可以使用静态的属性</li>
</ol>
</blockquote>
<h3 id="方法的重写override"><a href="#方法的重写override" class="headerlink" title="方法的重写override"></a>方法的重写override</h3><p>在现在的ES6里面，我们可以通过<code>extends</code>的关键字让对象实现继承 ，一个子级对象继承了父级对象以后就默认可以使用父级对象的方法</p>
<p>但是，如果父级对象的方法不满足要求呢？这个时候子级对象就要考虑得写这个方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好，我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>(userName);<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-comment">//写一个同名的方法，覆盖父级的方法</span><br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是student里面的方法&quot;</span>);<br>        <span class="hljs-comment">//在重写的子级方法里面，仍然可以通过super去调用父级的方法</span><br>        <span class="hljs-built_in">super</span>.sayHello();<br>    &#125;<br>&#125;<br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>);<br><br>s1.sayHello();<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<ol>
<li>当父级对象的方法满足不了子级对象的时候，我们就可以考虑重写这个方法</li>
<li>重写只需要在子级对象上面建立一个同名方法就可以了</li>
<li>在重写的子级方法里面，你仍然 可以通过super调用父级的方法</li>
</ol>
</blockquote>
<h3 id="extends实现继承的特点"><a href="#extends实现继承的特点" class="headerlink" title="extends实现继承的特点"></a>extends实现继承的特点</h3><p>在上面的学习当中，我们已经知道了<code>extends</code>可以实现继承了，这个时候我们就要深入的去了它怎么继承的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好， 我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>(userName);<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">study</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我的性别是<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sex&#125;</span>，我在学习`</span>);<br>        <span class="hljs-comment">// console.log(super.userName);   //undefined</span><br>        <span class="hljs-built_in">super</span>.sayHello();<br>    &#125;<br>&#125;<br><span class="hljs-comment">/*</span><br><span class="hljs-comment">     从代码的角度来看：</span><br><span class="hljs-comment">     父级有哪些方法和属性?  userName的属性和sayHello的方法</span><br><span class="hljs-comment">     子级有哪些方法和属性?  sex的属性 和 study的方法</span><br><span class="hljs-comment">*/</span><br><br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>我们可以在代码当中看到它的效果图</p>
<img src="https://pic.imgdb.cn/item/615ee4262ab3f51d9128e37f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211007094908918" style="zoom:50%;" />

<p>所有的属性都在<code>student</code>这个子级对象上面，而所有的方法都放在了父级上面</p>
<p>所以这样就可以解释为什么方法可以通过<code>super</code>去调用，而属性则不可以通过<code>super</code>去调用</p>
<hr>
<h2 id="13-面向对象的扩展"><a href="#13-面向对象的扩展" class="headerlink" title="13.面向对象的扩展"></a>13.面向对象的扩展</h2><h3 id="不可扩展"><a href="#不可扩展" class="headerlink" title="不可扩展"></a>不可扩展</h3><blockquote>
<p>一级保护：不可扩展</p>
</blockquote>
<p>在之前我们创建对象的时候，因为JS是一个弱类型的语言，所以对象即使在创建好了以后，仍然可以再次添加属性</p>
<p>同时在ES6里面，虽然推出了<code>const</code>的关键字，但是<code>const</code>锁栈不锁堆，所以对于对象的保住仍然欠缺，这个时候ES6就堆出了新的技术用于保护我们的对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> obj = &#123;<br>    <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;张三&quot;</span>;<br>&#125;<br>obj.userName = <span class="hljs-string">&quot;李四&quot;</span>;  <span class="hljs-comment">//正常</span><br>obj.sex=  <span class="hljs-string">&quot;男&quot;</span>;		   <span class="hljs-comment">//不报错</span><br>obj = <span class="hljs-number">123</span>;	<span class="hljs-comment">//报错      改变了栈内容</span><br></code></pre></td></tr></table></figure>

<p>如果我们希望一个对象构建好了以后不要再去添加其它属性或方法，我们就要把这个对象设置成一级保护对象：不可扩展对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> obj2 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span><br>&#125;<br><br><span class="hljs-comment">//一级保护，不可扩展</span><br><span class="hljs-built_in">Object</span>.preventExtensions(obj2);<br><br>obj2.sex = <span class="hljs-string">&quot;男&quot;</span>;			<span class="hljs-comment">//这个时候这个属性是添加不上去的</span><br></code></pre></td></tr></table></figure>

<h3 id="密封"><a href="#密封" class="headerlink" title="密封"></a>密封</h3><blockquote>
<p>二级保护：密封，它不能扩展，也不能删除</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/*</span><br><span class="hljs-comment">   const obj1 = &#123;</span><br><span class="hljs-comment">       userName:&quot;张三&quot;</span><br><span class="hljs-comment">   &#125;</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">   delete obj1.userName;  //删除userName属性</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-comment">//二级保护 ：密封</span><br><span class="hljs-keyword">const</span> obj2 = &#123;<br>    <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;张三&quot;</span><br>&#125;;<br><span class="hljs-built_in">Object</span>.seal(obj2);<br><br>obj2.sex = <span class="hljs-string">&quot;男&quot;</span>;        <span class="hljs-comment">//添加失败，不可扩展</span><br><span class="hljs-keyword">delete</span> obj2.userName;   <span class="hljs-comment">//删除失败，不能删</span><br></code></pre></td></tr></table></figure>

<h3 id="冻结"><a href="#冻结" class="headerlink" title="冻结"></a>冻结</h3><blockquote>
<p>三级保存：冻结，不可扩展，不可删除， <strong>不可改变</strong>，把堆完成锁住了</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> obj1 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span><br>&#125;<br><span class="hljs-comment">//普通的const是锁栈不锁堆的</span><br>obj1.userName = <span class="hljs-string">&quot;李四&quot;</span>;<br><br><br><span class="hljs-keyword">const</span> obj2 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span><br>&#125;<br><span class="hljs-comment">//使用三级保护 冻结</span><br><span class="hljs-built_in">Object</span>.freeze(obj2);<br>obj2.sex = <span class="hljs-string">&quot;男&quot;</span>;                <span class="hljs-comment">//不可添加</span><br><span class="hljs-keyword">delete</span> obj2.userName;           <span class="hljs-comment">//不可删除</span><br>obj2.userName = <span class="hljs-string">&quot;小帅哥&quot;</span>;       <span class="hljs-comment">//不可更改</span><br></code></pre></td></tr></table></figure>

<h3 id="Object-is"><a href="#Object-is" class="headerlink" title="Object.is()"></a>Object.is()</h3><p>在之前前的运算符里面，我们学习过了相等操作符以及全等操作符，<code>Object.is</code>则比全等操作符还要严格，它主要用于对象之间的判断相等，它判断的是内存当中的值是否相等</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span> == <span class="hljs-number">1</span>);                <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;1&quot;</span> === <span class="hljs-number">1</span>);             <span class="hljs-comment">//false</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Object</span>.is(<span class="hljs-number">1</span>, <span class="hljs-number">1</span>));       <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Object</span>.is(<span class="hljs-string">&quot;1&quot;</span>, <span class="hljs-number">1</span>));     <span class="hljs-comment">//false</span><br><br><span class="hljs-keyword">let</span> obj1 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span><br>&#125;;<br><span class="hljs-keyword">let</span> obj2 = obj1; <span class="hljs-comment">//浅拷贝，栈里面的地址相同</span><br><br><span class="hljs-keyword">let</span> obj3 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span><br>&#125;;<br><span class="hljs-built_in">console</span>.log(obj1 === obj2);         <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(obj1 === obj3);         <span class="hljs-comment">//false</span><br><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Object</span>.is(obj1,obj2));  <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Object</span>.is(obj1,obj3));  <span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码说明 ：通过上面的对比，我们可以发现，<code>Object.is</code>与<code>===</code>执行的效果是相同的，但是请始终注意一点，<code>Object.is</code>是深入到内存里面去对比，并且是以二进制的方式对比</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> == <span class="hljs-number">0</span>);                <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(<span class="hljs-number">0</span> === <span class="hljs-number">0</span>);               <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(-<span class="hljs-number">0</span> == +<span class="hljs-number">0</span>);              <span class="hljs-comment">//true</span><br><span class="hljs-built_in">console</span>.log(-<span class="hljs-number">0</span> === +<span class="hljs-number">0</span>);             <span class="hljs-comment">//true</span><br><span class="hljs-keyword">let</span> result = <span class="hljs-built_in">Object</span>.is(-<span class="hljs-number">0</span>, +<span class="hljs-number">0</span>);<br><span class="hljs-built_in">console</span>.log(result);                <span class="hljs-comment">//false    二进制不同</span><br><span class="hljs-keyword">let</span> result2 = <span class="hljs-built_in">Object</span>.is(<span class="hljs-literal">NaN</span>,<span class="hljs-literal">NaN</span>);<br><span class="hljs-built_in">console</span>.log(result2);				<span class="hljs-comment">//true  相同</span><br></code></pre></td></tr></table></figure>

<hr>
<h2 id="14-WeakSet及WeakMap"><a href="#14-WeakSet及WeakMap" class="headerlink" title="14.WeakSet及WeakMap"></a>14.WeakSet及WeakMap</h2><p>这个东西与这前上面所学习的Set及Map相同的东西，只是有一些细微的区别 ，它们叫弱Set和弱Map</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Set</span>();<br>s1.add(<span class="hljs-string">&quot;hello&quot;</span>).add(<span class="hljs-number">123</span>).add(<span class="hljs-built_in">Math</span>);<br><br><br><span class="hljs-keyword">let</span> s2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">WeakSet</span>();<br>s2.add(&#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span><br>&#125;);<br>s2.add([<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;b&quot;</span>]);<br><span class="hljs-comment">//s2.add(&quot;hello&quot;);   //报错</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<p>Set是普通的集合，可以加任何元素进去，但WeakSet只能添加引用类型的数据进去</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> m1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>();<br>m1.set(<span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-string">&quot;hello&quot;</span>);<br>m1.set(<span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-string">&quot;world&quot;</span>);<br>m1.set(<span class="hljs-string">&quot;c&quot;</span>, &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;标哥哥&quot;</span><br>&#125;);<br><br><br><span class="hljs-keyword">let</span> m2 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">WeakMap</span>();<br><span class="hljs-comment">// WeakMap只能是引用类型做key</span><br><span class="hljs-comment">// m2.set(&quot;a&quot;,&quot;hello&quot;);</span><br>m2.set([<span class="hljs-string">&quot;a&quot;</span>],<span class="hljs-string">&quot;hello&quot;</span>);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<p>Map是一个普通的键值对集合，所以可以以任何元素做key，<strong>但是WeakMap只能是引用数据类型的数据做key</strong></p>
</blockquote>
<p><span style="color:red;font-weight:bold">注意：WeakSet及WeakMap没有实现<code>Iterable</code>的接口，所以它不能使用<code>for...of</code>遍历，也不能使用展开运算符</span></p>
<hr>
<h2 id="15-指数运算符"><a href="#15-指数运算符" class="headerlink" title="15.指数运算符"></a>15.指数运算符</h2><p>在之前的ES5里面，如果我们想求一个数的多少次方法，必须使用<code>Math.pow</code>这个函数，现在在ES6里面，更简单了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//求3的5次</span><br><span class="hljs-keyword">let</span> num1 = <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">3</span>, <span class="hljs-number">5</span>);<br><span class="hljs-keyword">let</span> num2 = <span class="hljs-number">3</span> ** <span class="hljs-number">5</span>;<br><br><span class="hljs-comment">//也可以叠加使用</span><br><span class="hljs-keyword">let</span> num3 = <span class="hljs-number">2</span> ** <span class="hljs-number">2</span> ** <span class="hljs-number">2</span>;<br><span class="hljs-keyword">let</span> num4 = <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">2</span>, <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>));<br></code></pre></td></tr></table></figure>

<h2 id="16-大整型数据类型BigInt"><a href="#16-大整型数据类型BigInt" class="headerlink" title="16.大整型数据类型BigInt"></a>16.大整型数据类型BigInt</h2><p>在之前的ES5里面，我们的所有的数值都是在Number类里面， 而我们在学习这个Number类型的时候给大家说过，JS的数值没有整数与小数的区别，只有范围的区别，因为有范围的限制，所以JS在进行大数据运算的时候就容易溢出报错，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> num1 = <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">2</span>, <span class="hljs-number">513</span>);<br><br><span class="hljs-keyword">let</span> num2 = <span class="hljs-built_in">Math</span>.pow(<span class="hljs-number">2</span>, <span class="hljs-number">513</span>) + <span class="hljs-number">1</span>;<br><br><span class="hljs-built_in">console</span>.log(num1 === num2);    <span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码分析：</p>
<ol>
<li>我们在num1上面求了2的513次方</li>
<li>我们在num2上面也求了2的513次方，但是+1</li>
<li>结果在对比的时候，它们两个数值相等，因为这个数值又经超过了JS的最大范围，它计算不过来，把后面的值直接忽略掉了</li>
</ol>
</blockquote>
<p>所以对于这种比较大的数据的运算的时候，它就会报错。ES6为了解决这个问题就推出了新的数据类型叫<code>BigInt</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> num1 = <span class="hljs-number">1n</span>;			<br><span class="hljs-keyword">typeof</span> num1;  <span class="hljs-comment">//&quot;bigint&quot;</span><br><br><span class="hljs-keyword">let</span> num2 = <span class="hljs-number">0.</span><span class="hljs-number">5n</span>;  <span class="hljs-comment">//报错   只能是整数</span><br></code></pre></td></tr></table></figure>

<p>现在有了这个新的数据类型以后，我们再去计算一下上面的算式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> a = <span class="hljs-number">2n</span>;<br><span class="hljs-keyword">let</span> b = <span class="hljs-number">513n</span>;<br><br><span class="hljs-keyword">let</span> num1 = a ** b;<br><br><span class="hljs-keyword">let</span> num2 = a ** b + <span class="hljs-number">1n</span>;<br><span class="hljs-built_in">console</span>.log(num1 === num2);			<span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<h2 id="17-BigInt数据类型转换"><a href="#17-BigInt数据类型转换" class="headerlink" title="17.BigInt数据类型转换"></a>17.BigInt数据类型转换</h2><p>这里要注意一点，BigInt与Number之间是不能进行相互运算的，它需要转换以后才能进行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">BigInt</span>(<span class="hljs-number">123</span>);					<span class="hljs-comment">//123n</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-string">&quot;123&quot;</span>);					<span class="hljs-comment">//123n</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-string">&quot;aaa&quot;</span>);					<span class="hljs-comment">//报错</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-literal">null</span>);					<span class="hljs-comment">//报错</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-literal">undefined</span>);				<span class="hljs-comment">//报错</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-literal">NaN</span>);					<span class="hljs-comment">//报错</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-literal">false</span>);					<span class="hljs-comment">//0n</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-string">&quot;&quot;</span>);						<span class="hljs-comment">//0n</span><br><span class="hljs-built_in">BigInt</span>(<span class="hljs-number">3.14</span>);					<span class="hljs-comment">//报错</span><br></code></pre></td></tr></table></figure>

<hr>
<h2 id="18-！！！Symbol数据类型"><a href="#18-！！！Symbol数据类型" class="headerlink" title="18.！！！Symbol数据类型"></a>18.！！！Symbol数据类型</h2><p>Symbol是ES6当中推出的新的数据类型，它的全称叫标识类型，通常叫<strong>全局唯一标识符</strong>，这个东西的出现是为了对应后端语言当中的UUID、GUID</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//6e63ff62-2734-11ec-b8b3-34298f73191b</span><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-built_in">Symbol</span>(); <span class="hljs-comment">//   这就得到一个Symbol的数据类型的东西</span><br><br><span class="hljs-comment">//a0810575-2734-11ec-b8b3-34298f73191b</span><br><span class="hljs-keyword">let</span> s2 = <span class="hljs-built_in">Symbol</span>();  <span class="hljs-comment">//又得到一个</span><br><br><span class="hljs-keyword">typeof</span> s1;<br><span class="hljs-keyword">typeof</span> s2;<br><br><span class="hljs-built_in">console</span>.log(s1 == s2);      <span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<p>Symbol是需要通过调用<code>symbol()</code>的方法得到了，每次得到的都是不一样的，它是全局唯一的</p>
<p>如果想得到相同中的<code>Symbol</code>是可以通过下面的方式来进行的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> s1 = <span class="hljs-built_in">Symbol</span>();<br><span class="hljs-keyword">let</span> s2 = <span class="hljs-built_in">Symbol</span>();<br><br><span class="hljs-built_in">console</span>.log(s1 == s2);          <span class="hljs-comment">//false</span><br><span class="hljs-comment">//------------------------</span><br><br><span class="hljs-keyword">let</span> s3 = <span class="hljs-built_in">Symbol</span>.for(<span class="hljs-string">&quot;标哥&quot;</span>);<br><span class="hljs-keyword">let</span> s4 = <span class="hljs-built_in">Symbol</span>.for(<span class="hljs-string">&quot;标哥&quot;</span>);<br><span class="hljs-built_in">console</span>.log(s3 == s4);          <span class="hljs-comment">//true</span><br></code></pre></td></tr></table></figure>

<p>但是要注意下边的情况</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//---------------------</span><br><br><span class="hljs-keyword">let</span> s5 = <span class="hljs-built_in">Symbol</span>(<span class="hljs-string">&quot;王奥东&quot;</span>);<br><span class="hljs-keyword">let</span> s6 = <span class="hljs-built_in">Symbol</span>(<span class="hljs-string">&quot;王奥东&quot;</span>);<br><span class="hljs-built_in">console</span>.log(s5 == s6);                  <span class="hljs-comment">//false</span><br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/615ee8252ab3f51d91307756.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211007141450051" style="zoom:50%;" />

<p> 根据上面的图我们就觉得很奇怪，为什么<code>s3==s4</code>是成立的，而<code>s5==s6</code>是不成立的呢</p>
<blockquote>
<p>上面的情况其实是可以很形象的去理解</p>
<p><code>Symbol.for</code>相当于从谁的那里获取标签，<code>Symbol.for(&quot;标哥&quot;)</code>相当于从“标哥”那里得到了标签，所以<code>s3,s4</code>都是从标哥那里得到的，它们就相同</p>
<p><code>Symbol(&quot;王奥东&quot;)</code>这相当于标签是要贴在王奥东上面的，这个时候贴在王奥东上面的标签就不是一样的</p>
</blockquote>
<h3 id="Symbol的应用点"><a href="#Symbol的应用点" class="headerlink" title="Symbol的应用点"></a>Symbol的应用点</h3><p>Symbol最独特的点就在于它的唯一性，不会重复，所以当某些东西不能重复的时候，我们就会使用它</p>
<p>在对象里面，我们的属性是不能重复，如果属性重复了，则后面的属性值就覆盖前面的属性值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj1 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">age</span>: <span class="hljs-number">19</span>,<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;李四&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>如果这个时候我们想让两个属性都保留下来，怎么办呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj2 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">age</span>: <span class="hljs-number">19</span><br>&#125;<br><br><span class="hljs-keyword">let</span> obj3 = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;李四&quot;</span>,<br>    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span>,<br>    <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;睡觉&quot;</span>,<br>&#125;<br><br><span class="hljs-keyword">let</span> obj4 = &#123;<br>    ...obj2,<br>    ...obj3<br>&#125;;<br></code></pre></td></tr></table></figure>

<p>上面的代码里面，我们将两个对象进行合并以后，<code>userName</code>的属性名相同，所以就会被合并</p>
<p>试想一下，如果在以后的开发过程当 ，某些属性不需希望被别人合并覆盖，怎么办呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript">    <br><span class="hljs-keyword">let</span> obj2 = &#123;<br>    [<span class="hljs-built_in">Symbol</span>(<span class="hljs-string">&quot;userName&quot;</span>)]: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">age</span>: <span class="hljs-number">19</span><br>&#125;<br><br><span class="hljs-keyword">let</span> obj3 = &#123;<br>    [<span class="hljs-built_in">Symbol</span>(<span class="hljs-string">&quot;userName&quot;</span>)]: <span class="hljs-string">&quot;李四&quot;</span>,<br>    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span>,<br>    <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;睡觉&quot;</span>,<br>&#125;<br><br><span class="hljs-keyword">let</span> obj4 = &#123;<br>    ...obj2,<br>    ...obj3<br>&#125;;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>我们可以把那些不允许覆盖的属性名用Symbol去表示，这样就永远不会重复，就永远不会冲突</p>
</blockquote>
<h3 id="Symbol做属性名"><a href="#Symbol做属性名" class="headerlink" title="Symbol做属性名"></a>Symbol做属性名</h3><p>Symbol最大的应用点就是做属性名，其实在很早之前我们就已经接触这个点了</p>
<p>在之前我们为了遍历对象的属性，我们可以使用如下的方法</p>
<ol>
<li><code>for...in</code></li>
<li><code>Object.keys()</code></li>
<li><code>Object.getOwnPropertyNames()</code></li>
</ol>
<p>这三个方法其实并不完全，因为如果属性名是<code>Symbol</code>我们就得到不到</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj3 = &#123;<br>    [<span class="hljs-built_in">Symbol</span>(<span class="hljs-string">&quot;userName&quot;</span>)]: <span class="hljs-string">&quot;李四&quot;</span>,<br>    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;女&quot;</span>,<br>    <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;睡觉&quot;</span>,<br>&#125;<br><br><span class="hljs-keyword">let</span> propertyArray = <span class="hljs-built_in">Object</span>.getOwnPropertyNames(obj3);		<span class="hljs-comment">//[&quot;sex&quot;,&quot;hobby&quot;];</span><br></code></pre></td></tr></table></figure>

<p>如果想获取<code>Symbol</code>的属性名，需要单独的使用一个方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> symbolPropertyArrar = <span class="hljs-built_in">Object</span>.getOwnPropertySymbols(obj3);   <span class="hljs-comment">//[Symbol(&quot;userName&quot;)]</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>最后注意一点，<code>JSON.stringify</code>在序列化对象的时候，不会操作Symbol的属性</strong></p>
</blockquote>
<p><strong>总结</strong>：</p>
<ol>
<li>Symbol是默认不会重复的，它是全局唯一的标识</li>
<li>Symbol是基本数据类型，它必须通过<code>Symbol()</code>函数的返回值得到，每次得到的都不一样</li>
<li><code>Symbol.for()</code>可以得到相同事的标识名</li>
<li><code>Symbol(&quot;描述信息&quot;)</code> 在创建标识的时候是可以添加描述信息的</li>
<li>在Symbol数据类型里面，有一些特殊的值，其中目前用得最多的就是<code>[Symbol.iterator]</code>迭代器，它是Symbol数据类型里面迭代器的标识，这个标识只能贴在生成器函数上面</li>
</ol>
<h2 id="19-生成器函数"><a href="#19-生成器函数" class="headerlink" title="19.生成器函数"></a>19.生成器函数</h2><blockquote>
<p>生成器函数就是为了生成迭代器的，它叫Generator Function</p>
</blockquote>
<p>它是ES6里新出的一种类型的函数，旨在解决迭代的问题</p>
<p>普通函数定义如所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;a&quot;</span>;<br>&#125;<br><span class="hljs-keyword">var</span> x1 = abc();<br></code></pre></td></tr></table></figure>

<p>在普通的函数里面，我们通过return去返回一个值，并且只能返回一次，因为函数一旦碰撞return就结束了</p>
<p>试想一下，有没有一个函数可以多次返回？？？这个时候你需要迭代器！</p>
<h3 id="定义生成器函数"><a href="#定义生成器函数" class="headerlink" title="定义生成器函数"></a>定义生成器函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">def</span>(<span class="hljs-params"></span>) </span>&#123;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<p>生成器函数在定义的时候只需要在函数名的前面添加一个星号<code>*</code>即可，生成器的函数内部是可以进行多次返回的，我们把这个返回的过程称之为迭代的过程</p>
<p>生成器函数执行以后，返回的结果是一个对象，这个对象是迭代器对象</p>
<pre><code class=" mermaid">graph LR
A[生成器函数]--&gt;|执行|B[迭代器接口]
</code></pre>

<p>在生成器函数内部，如果要进行多次返回，我们应该使用<code>yield</code>关键字，它可以多次返回</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-comment">//生成器函数是可以返回多个值出来的</span><br>    <span class="hljs-comment">//生成器的函数如果要返回多个，则不能使用return返回，要使用新关键字</span><br>    <span class="hljs-keyword">yield</span> <span class="hljs-string">&quot;a&quot;</span>;<br>    <span class="hljs-keyword">yield</span> <span class="hljs-string">&quot;b&quot;</span>;<br>    <span class="hljs-keyword">yield</span> <span class="hljs-string">&quot;c&quot;</span>;<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;标哥&quot;</span>;<br>&#125;<br><br><span class="hljs-keyword">let</span> x = abc(); <span class="hljs-comment">//生成器函数运行以后，得到的是迭代器</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码当中，我们的abc生成器函数就<code>yield</code>了<code>a,b,c</code>三个东西，最后又<code>return &quot;标哥&quot;</code>,整个生成器函数其实是向外边传递了4个值出去了</p>
<p>但是这个值并不是一次性传递出去的，而是一个一个返回的</p>
</blockquote>
<p>我们现在把上面的函数执行看效果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> x = abc(); <span class="hljs-comment">//生成器函数运行以后，得到的是迭代器</span><br><br><span class="hljs-keyword">let</span> a1 = x.next();          <span class="hljs-comment">//&#123;value: &#x27;a&#x27;, done: false&#125;</span><br><span class="hljs-keyword">let</span> a2 = x.next();          <span class="hljs-comment">//&#123;value: &#x27;b&#x27;, done: false&#125;</span><br><span class="hljs-keyword">let</span> a3 = x.next();          <span class="hljs-comment">//&#123;value: &#x27;c&#x27;, done: false&#125;</span><br><span class="hljs-keyword">let</span> a4 = x.next();          <span class="hljs-comment">//&#123;value: &#x27;标哥&#x27;, done: true&#125;</span><br></code></pre></td></tr></table></figure>

<p>在执行完a4以后，我们看到<code>done</code>已经变为true了，这就说明迭代结束了</p>
<h2 id="20-迭代器"><a href="#20-迭代器" class="headerlink" title="20.迭代器"></a>20.迭代器</h2><p>迭代就是把一些东西一个一个的拿出来 ，并且只能顺着拿（正向的拿），一旦结束迭代不能重新开始，也不能break</p>
<p>迭代器就是一个一个的返回，可以多次返回，迭代器只能通过生成器函数得到</p>
<h3 id="迭代器接口"><a href="#迭代器接口" class="headerlink" title="迭代器接口"></a>迭代器接口</h3><blockquote>
<p>接口称之为规范，只要是实现了这个接口的，就一定是实现了这个规范，实现这个规范就具备这个能力</p>
<p>迭代器接口叫<code>Iterable</code></p>
</blockquote>
<p>迭代器接口也叫迭代器对象，更称之为迭代器规范，<strong>在这个规范里面，它执行以下的操作</strong></p>
<ol>
<li><p>每个迭代器的接口里面都有一个<code>next()</code>的方法，让程序继续向后面运行，直到下一个<code>yiled</code>再停止</p>
</li>
<li><p>当迭代器执行<code>next()</code>程序继续向后面运行，并返回当前迭代内容，这个内容是一个对象，这个对象里面包含一个<code>value</code>的属性，以及<code>done</code>的属性</p>
<p><code>value</code>代表代表本次迭代返回的值，<code>done</code>如果是<code>false</code>代表还可以继续迭代，如果是<code>true</code>则代表迭代已经结束了</p>
</li>
</ol>
<h3 id="迭代器的状态"><a href="#迭代器的状态" class="headerlink" title="迭代器的状态"></a>迭代器的状态</h3><p>当生成器函数生成迭代器以后，迭代器默认内部的状态的</p>
<ol>
<li><code>suspended</code>暂停状态</li>
<li><code>closed</code>关闭状态，当推荐结束以后就会进入到关闭状态</li>
</ol>
<h3 id="迭代器遍历"><a href="#迭代器遍历" class="headerlink" title="迭代器遍历"></a>迭代器遍历</h3><p>迭代器是可以遍历，在上面的代码当中我们发再见，我们可以使用<code>next()</code>的方法一个一个的拿值，这样很麻烦 ，我们能不能一次性从开始拿到结束</p>
<p>之前我们说过只要是实现了迭代器接口就可以使用<code>for...of</code>，而迭代器本身就是这个规范，所以它肯定 是可以使用<code>for...of</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-comment">//生成器函数是可以返回多个值出来的</span><br>    <span class="hljs-comment">//生成器的函数如果要返回多个，则不能使用return返回，要使用新关键字</span><br>    <span class="hljs-keyword">yield</span> <span class="hljs-string">&quot;a&quot;</span>;<br>    <span class="hljs-keyword">yield</span> <span class="hljs-string">&quot;b&quot;</span>;<br>    <span class="hljs-keyword">yield</span> <span class="hljs-string">&quot;c&quot;</span>;<br>    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;标哥&quot;</span>;<br>&#125;<br><br><span class="hljs-keyword">let</span> x = abc(); <span class="hljs-comment">//生成器函数运行以后，得到的是迭代器</span><br><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> x) &#123;<br>    <span class="hljs-built_in">console</span>.log(item);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>当然，能够使用<code>for...of</code>的，就一定可以使用展开运算符<code>...</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(...x);<br></code></pre></td></tr></table></figure>

<h3 id="主动实现迭代器接口"><a href="#主动实现迭代器接口" class="headerlink" title="主动实现迭代器接口"></a>主动实现迭代器接口</h3><blockquote>
<p>主动实现迭代器接口，只需要对象内部添加一个<code>Symbol.Iterator</code> 的生成器方法即可</p>
</blockquote>
<p>在之前所学习的Set集合及Map集合当中，我们的<code>keys()</code>及<code>values()</code>方法都是生成器的函数，它会帮我们生成一个迭代器对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//values是一个生成器函数,执行以后返回迭代器</span><br><span class="hljs-comment">//x1是一个迭代器</span><br><span class="hljs-keyword">let</span> x1 = s.values();<br><br><span class="hljs-keyword">let</span> a1 = x1.next();         <span class="hljs-comment">//&#123;value: &#x27;张三&#x27;, done: false&#125;</span><br><span class="hljs-keyword">let</span> a2 = x1.next();         <span class="hljs-comment">//&#123;value: &#x27;李四&#x27;, done: false&#125;</span><br><span class="hljs-keyword">let</span> a3 = x1.next();         <span class="hljs-comment">//&#123;value: &#x27;王五&#x27;, done: false&#125;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面<code>x1</code>是一个迭代器，所以我们可以使用<code>for...of</code>去操作，但是请看下面的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> s)&#123;<br>    <span class="hljs-built_in">console</span>.log(item);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><span style="color:red;font-weight:bold">这个时候就很奇怪 了，s又不是迭代器，它为什么可以for…of</span></p>
<p>还请同学们一定要注意之前所讲过一句话，一个对象如果使用<code>for...of</code>或展开运算符，那么这对象要么是迭代器，要么就实现了迭代器的接口，Set就是实现了迭代器接口了</p>
<p>那么怎么样看一个对象是否实现了<code>Iterable</code>推荐器接口呢，这个时候要只要看当前对象上面有没有贴一个迭代器<code>Symbol.iterator</code>的标签</p>
<img src="https://pic.imgdb.cn/item/615ee97b2ab3f51d91333a2f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211007163523317" style="zoom:50%;" />

<p>如果我们自己的对象也希望实现一个像这样的接口，怎么办呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj1 = &#123;<br>    <span class="hljs-number">0</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-number">1</span>: <span class="hljs-string">&quot;李四&quot;</span>,<br>    <span class="hljs-number">2</span>: <span class="hljs-string">&quot;王五&quot;</span>,<br>    <span class="hljs-number">3</span>: <span class="hljs-string">&quot;赵六&quot;</span>,<br>    <span class="hljs-attr">length</span>: <span class="hljs-number">4</span><br>&#125;<br><span class="hljs-comment">//上面是一个类数组</span><br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> obj1)&#123;<br>    <span class="hljs-built_in">console</span>.log(item);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>如果我们直接像上面去写，一定会报，如下</p>
<p><img src="https://pic.imgdb.cn/item/615ee9f42ab3f51d91343155.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211007163835641"></p>
<p>这个是为想使用<code>for...of</code>必须是迭代器或实现迭代器接口，我的<code>obj1</code>不是迭代器，所以如果我们想实现<code>for...of</code>必须要实现迭代器接口<code>Iterable</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj1 = &#123;<br>    <span class="hljs-number">0</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-number">1</span>: <span class="hljs-string">&quot;李四&quot;</span>,<br>    <span class="hljs-number">2</span>: <span class="hljs-string">&quot;王五&quot;</span>,<br>    <span class="hljs-number">3</span>: <span class="hljs-string">&quot;赵六&quot;</span>,<br>    <span class="hljs-attr">length</span>: <span class="hljs-number">4</span>,<br>    *[<span class="hljs-built_in">Symbol</span>.iterator]() &#123;<br>        <span class="hljs-keyword">let</span> index = <span class="hljs-number">0</span>;<br>        <span class="hljs-keyword">while</span> (index &lt; <span class="hljs-built_in">this</span>.length) &#123;<br>            <span class="hljs-keyword">yield</span> <span class="hljs-built_in">this</span>[index];<br>            index++;<br>        &#125;<br>    &#125;<br>&#125;<br><span class="hljs-comment">//上面是一个类数组</span><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> obj1) &#123;<br>    <span class="hljs-built_in">console</span>.log(item);<br>&#125;<br><br><span class="hljs-built_in">console</span>.log(...obj1);<br></code></pre></td></tr></table></figure>

<h2 id="！！！生成器与迭代器总结"><a href="#！！！生成器与迭代器总结" class="headerlink" title="！！！生成器与迭代器总结"></a>！！！生成器与迭代器总结</h2><ol>
<li>生成器叫Generator Function，它执行以后函数并不会立即运行，它返回一个迭代器Iterable</li>
<li>迭代器是接口，也叫规范，实现接口叫就是实现规范，实现了规范以后就具备这个能力</li>
<li>实现了迭代器接口就具备迭代的能力，也具备<code>...</code>展开的能力，也具备<code>for...of</code>的能力</li>
<li>迭代器接口规范的内部<ul>
<li>有一个<code>next()</code>方法，让函数向后面运行</li>
<li><code>yield</code>返回本次迭代的接口</li>
<li>返回的结果是一个对象，有<code>&#123;value:&quot;&quot;,done:true&#125;</code>这么2个属性</li>
<li><code>value</code>代表<code>yield</code>返回出来 的值，<code>done</code>如果是<code>true</code>代表迭代结束，如果是<code>fasle</code>代表迭代没有结束</li>
</ul>
</li>
<li>如果想主动的去实现迭代器的接口，需要在对象的内部添加一个名为 <code>Symbol.iterator</code>的生成器函数</li>
</ol>
<blockquote>
<p><strong>next(参数) 传递的是上一个yield的返回值  第一个yield 接收不到参数</strong></p>
</blockquote>
<h2 id="21-反射Reflect"><a href="#21-反射Reflect" class="headerlink" title="21.反射Reflect"></a>21.反射Reflect</h2><p>提到反射我们就会想到镜子，反射可以理解为在镜子里面看<code>Object</code>对象，<u>所以反射是操作对象的另一种方式，相当于一个“照妖镜”，可以把对象内部的所有东西都照出来</u></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj1 = &#123;<br>    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>    [<span class="hljs-built_in">Symbol</span>(<span class="hljs-string">&quot;userName&quot;</span>)]: <span class="hljs-string">&quot;张三丰&quot;</span><br>&#125;<br><span class="hljs-built_in">Object</span>.defineProperty(obj1, <span class="hljs-string">&quot;age&quot;</span>, &#123;<br>    <span class="hljs-attr">value</span>: <span class="hljs-number">18</span>,<br>    <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">false</span><br>&#125;);<br><br><span class="hljs-built_in">Object</span>.keys(obj1); <span class="hljs-comment">//[&#x27;sex&#x27;]</span><br><span class="hljs-built_in">Object</span>.getOwnPropertyNames(obj1); <span class="hljs-comment">//[&#x27;sex&#x27;, &#x27;age&#x27;]</span><br><span class="hljs-built_in">Object</span>.getOwnPropertySymbols(obj1); <span class="hljs-comment">//[Symbol(userName)]</span><br><span class="hljs-comment">// 如果按照我们以前旧的方法，我们要把所有的属性名都获取一遍，很麻烦</span><br><br><span class="hljs-built_in">Reflect</span>.ownKeys(obj1);      <span class="hljs-comment">//[&#x27;sex&#x27;, &#x27;age&#x27;, Symbol(userName)]</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码当中，我们充份的说明了<code>Reflect</code>照妖镜的特点，它可以一次性获取对象内部所有的属性</p>
<p><strong>以下主是反射的方法列表</strong></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">declare</span> <span class="hljs-keyword">namespace</span> Reflect &#123;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">apply</span>(<span class="hljs-params">target: <span class="hljs-built_in">Function</span>, thisArgument: <span class="hljs-built_in">any</span>, argumentsList: ArrayLike&lt;<span class="hljs-built_in">any</span>&gt;</span>): <span class="hljs-title">any</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">construct</span>(<span class="hljs-params">target: <span class="hljs-built_in">Function</span>, argumentsList: ArrayLike&lt;<span class="hljs-built_in">any</span>&gt;, newTarget?: <span class="hljs-built_in">Function</span></span>): <span class="hljs-title">any</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">defineProperty</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, propertyKey: PropertyKey, attributes: PropertyDescriptor</span>): <span class="hljs-title">boolean</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">deleteProperty</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, propertyKey: PropertyKey</span>): <span class="hljs-title">boolean</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, propertyKey: PropertyKey, receiver?: <span class="hljs-built_in">any</span></span>): <span class="hljs-title">any</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getOwnPropertyDescriptor</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, propertyKey: PropertyKey</span>): <span class="hljs-title">PropertyDescriptor</span> | <span class="hljs-title">undefined</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPrototypeOf</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span></span>): <span class="hljs-title">object</span> | <span class="hljs-title">null</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">has</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, propertyKey: PropertyKey</span>): <span class="hljs-title">boolean</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isExtensible</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span></span>): <span class="hljs-title">boolean</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ownKeys</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span></span>): (<span class="hljs-params"><span class="hljs-built_in">string</span> | symbol</span>)[]</span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">preventExtensions</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span></span>): <span class="hljs-title">boolean</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">set</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, propertyKey: PropertyKey, value: <span class="hljs-built_in">any</span>, receiver?: <span class="hljs-built_in">any</span></span>): <span class="hljs-title">boolean</span></span>;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setPrototypeOf</span>(<span class="hljs-params">target: <span class="hljs-built_in">object</span>, proto: <span class="hljs-built_in">object</span> | <span class="hljs-literal">null</span></span>): <span class="hljs-title">boolean</span></span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<ol>
<li><p><code>apply</code>相当于，相于之前的方法名.apply的调用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params">str</span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>`</span>);<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`我接收的参数是<span class="hljs-subst">$&#123;str&#125;</span>`</span>);<br>    &#125;<br>&#125;<br>obj.sayHello(<span class="hljs-number">123</span>);<br>obj.sayHello.apply(obj, [<span class="hljs-number">123</span>]);<br><span class="hljs-built_in">Reflect</span>.apply(obj.sayHello, obj, [<span class="hljs-number">123</span>]);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>construct</code>相当于<code>new</code>了某一个构造函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span></span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName</span>)</span>&#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;李四&quot;</span>);<br><span class="hljs-keyword">let</span> s2 = <span class="hljs-built_in">Reflect</span>.construct(Student,[<span class="hljs-string">&quot;李四&quot;</span>]);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>defineProperty</code>在一个对象上面定义一个新的属性，相当于<code>Object.defineProperty</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">obj.age = <span class="hljs-number">19</span>;<br><span class="hljs-built_in">Reflect</span>.defineProperty(obj,<span class="hljs-string">&quot;age&quot;</span>,&#123;<br>    <span class="hljs-attr">configurable</span>:<span class="hljs-literal">false</span>,<br>    <span class="hljs-attr">value</span>:<span class="hljs-number">19</span><br>&#125;)<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>deleteProperty</code>删除一个属性，相当于<code>delete 对象.属性</code></p>
</li>
<li><p><code>get</code>获取对象的某一个属性值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">obj.age;<br><span class="hljs-built_in">Reflect</span>.get(obj,<span class="hljs-string">&quot;age&quot;</span>);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>getOwnPropertyDescriptor</code>获取对象属性的描述信息，相当于<code>Object.getOwnProperDescriptor</code>方法</p>
</li>
<li><p><code>getPrototypeOf</code>获取当前对象的原型对象，也就是获取<code>__proto__</code>。相当于<code>obj.__proto__</code></p>
</li>
<li><p><code>has</code>判断某一个对象上面是否有某一个属性，相当于<code>obj.hasOwnProperty()</code>方法</p>
</li>
<li><p><code>isExtensible</code>判断对象是否是一级保护对象（不可扩展对象）</p>
</li>
<li><p><code>ownKeys</code>获取某一个对象所有的属性名</p>
</li>
<li><p><code>preventExtensions</code>设置某一个对象为一级保护不可扩展，相当于<code>Object.preventExtensions</code></p>
</li>
<li><p><code>set</code>设置对象的某一个属性的属性值 ，相当于<code>obj.age = 18</code> </p>
</li>
<li><p><code>setPrototypeOf</code>设置某一个对象的原型对象，如<code>obj.__proto__ =obj2</code>;</p>
</li>
</ol>
<hr>
<h2 id="22-代理Proxy"><a href="#22-代理Proxy" class="headerlink" title="22.代理Proxy"></a>22.代理Proxy</h2><p>代理其实可以理解为代理人，代理律师或者经记人，在JS里面代理指的是全局的拦截</p>
<h3 id="代理的概念"><a href="#代理的概念" class="headerlink" title="代理的概念"></a>代理的概念</h3><p><strong>场景</strong>：一般的明星都是有经纪人的，明星的大部分的生活与工作都会由经纪人来安排 ，我们就可以认为经纪人就是这个明星的代理</p>
<p>如：现在有一明星叫胡歌，我做为它的粉丝，向他写了一封信，劝他多拍点好看的戏，这个时候信必不会到胡歌手上，只是先到胡歌的经纪人</p>
<p>如：胡歌是标哥喜欢的明星，标哥现在发达了，想找胡歌拍戏，片筹100W，这个我也并不是直接与胡歌见面，而民与胡歌的经纪人再商量</p>
<p>如：有一个狂热的粉丝喜欢胡歌，想要胡歌的手机号和微信号，这个时候粉丝要求并不会直接传递到胡歌本人，直接被胡歌经纪人拒绝</p>
<hr>
<p>所以在上面的场景里面，胡歌的经纪人就是一个代理，而胡歌本人就是一个目标，胡歌的经纪人就代理了胡歌的所有事件，所以给胡歌的东西<code>set</code>及从胡歌那里得到的信息<code>get</code>都被会被胡歌的经纪人拦截一遍</p>
<p>代理里面有两个核心的观念</p>
<ol>
<li>代理对象proxy</li>
<li>目标对象target</li>
</ol>
<p>在上面的案例里面，代理对象proxy是胡歌的经纪人，目标对象target胡歌</p>
<p><img src="https://pic.imgdb.cn/item/6160e1c52ab3f51d91db4c2f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211008095943723"></p>
<p>在上图中我们可以看出，外界对胡歌所有的操作都会经过胡歌的代理人，所以我们就认为JS里面代理和这很你，是全局拦截</p>
<h3 id="创建代理"><a href="#创建代理" class="headerlink" title="创建代理"></a>创建代理</h3><p>ES6是通过<code>Proxy</code>来实现代码的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//这就是胡歌对象</span><br><span class="hljs-keyword">let</span> huge = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;胡歌&quot;</span>,<br>    <span class="hljs-attr">work</span>: <span class="hljs-string">&quot;拍戏&quot;</span>,<br>    <span class="hljs-attr">money</span>: <span class="hljs-number">5000</span>,<br>    <span class="hljs-attr">address</span>: <span class="hljs-string">&quot;上海市浦东新区&quot;</span><br>&#125;<br><span class="hljs-comment">//现在需要新建经纪人【代理对象】</span><br><span class="hljs-keyword">let</span> huge_proxy = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(huge, &#123;<br><br>&#125;);<br></code></pre></td></tr></table></figure>

<p>上面的代码就是一个最简单的代码，我们可以通过上面的代码运行的效果图片来看</p>
<p><img src="https://pic.imgdb.cn/item/6160e27f2ab3f51d91dc06b6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211008103804353"></p>
<p>在上图片有代码对象<code>huge_proxy</code>里面有两个对象</p>
<ul>
<li><code>Handler</code>：具体代理目标对象的哪些操作</li>
<li><code>Target</code>：代理的目标对象</li>
</ul>
<p>我们在操作胡歌的代理对象<code>huge_proxy</code>得到的结果就是<code>huge</code>的结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">console</span>.log(huge.userName);<br><span class="hljs-built_in">console</span>.log(huge_proxy.userName);<br><br><span class="hljs-comment">// huge.money = 10000;</span><br>huge_proxy.money = <span class="hljs-number">10000</span>;<br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们可以发现操作<code>huge</code>及<code>huge_proxy</code>得到的结果是一样的，因为<code>huge_proxy</code>的代理目标就是<code>huge</code></p>
<h3 id="代理的作用"><a href="#代理的作用" class="headerlink" title="代理的作用"></a>代理的作用</h3><p>在上一个章节，我们创建代理的时候，我们可以看到操作代理对象<code>huge_proxy</code>及本来的对象<code>huge</code>结果是一样的，那我们为什么要操作代理对象呢</p>
<p>代理在ES6里面的本意就是本局拦截</p>
<p><img src="https://pic.imgdb.cn/item/6160e2dd2ab3f51d91dc62dc.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211008104316030"></p>
<p>在上图中我们可以看到，如果我们操作胡歌的代理对象，我们就可以实现拦截</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//这就是胡歌对象</span><br><span class="hljs-keyword">let</span> huge = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;胡歌&quot;</span>,<br>    <span class="hljs-attr">work</span>: <span class="hljs-string">&quot;拍戏&quot;</span>,<br>    <span class="hljs-attr">money</span>: <span class="hljs-number">5000</span>,<br>    <span class="hljs-attr">address</span>: <span class="hljs-string">&quot;上海市浦东新区&quot;</span><br>&#125;<br><span class="hljs-comment">//现在需要新建经纪人【代理对象】</span><br><span class="hljs-keyword">let</span> huge_proxy = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(huge, &#123;<br>    <span class="hljs-comment">// 代表了胡歌的取值操作</span><br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p === <span class="hljs-string">&quot;money&quot;</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;胡歌的薪资保密&quot;</span><br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">return</span> target[p];<br>        &#125;<br>    &#125;,<br>    <span class="hljs-comment">//代理了胡歌赋值操作</span><br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">target, p, v</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p === <span class="hljs-string">&quot;money&quot;</span>) &#123;<br>            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;经济人贪了&quot;</span>);<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            target[p] = v;<br>        &#125;<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>上面的<code>get</code>是取值的时候代理，所有的取值操作都会触发<code>get</code>方法，而<code>set</code>方法则是代理赋值操作，所有的赋值都会触发<code>set</code>方法</p>
<p>target代表代理的目标对象，p代表操作的属性名，v代表操作的属性值</p>
</blockquote>
<h3 id="代理的应用点"><a href="#代理的应用点" class="headerlink" title="代理的应用点"></a>代理的应用点</h3><p>我们现在先只讲一个应用点</p>
<p>如果我们想创建一个对象，这个对象有用户名，密码，性别，年龄，身高这五个属性，我们希望创建的这个对象只对外边公开用户名，性别两个属性，其它的属性不允许外边获取，怎么办呢？</p>
<p>这个需求的本意是要创建用户名<code>userName</code>，密码<code>password</code>，年龄<code>age</code>，性别<code>sex</code>，身高<code>height</code>，但是只对外公开<code>userName</code>与<code>sex</code>，怎么办呢</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> obj = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">password</span>: <span class="hljs-string">&quot;123456&quot;</span>,<br>    <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,<br>    <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>    <span class="hljs-attr">height</span>: <span class="hljs-number">170</span><br>&#125;<br><span class="hljs-comment">//如果我们直接把obj给别人，那么所有的属性都会给别人使用</span><br><span class="hljs-comment">//但是我们仅仅只是希望把userName及sex给别人</span><br><span class="hljs-comment">//这个时候我们就不能给源对象，只能新建一个代理对象，拦截一下</span><br><span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(obj, &#123;<br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p == <span class="hljs-string">&quot;userName&quot;</span> || p == <span class="hljs-string">&quot;sex&quot;</span>) &#123;<br>            <span class="hljs-comment">//正常给值</span><br>            <span class="hljs-keyword">return</span> target[p];<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">undefined</span>;<br>        &#125;<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">target, p, v</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p == <span class="hljs-string">&quot;userName&quot;</span> || p == <span class="hljs-string">&quot;sex&quot;</span>) &#123;<br>            target[p] = v;<br>        &#125;<br>    &#125;<br>&#125;);<br>p1.userName;  	<span class="hljs-comment">//正常  张三</span><br>p1.sex;			<span class="hljs-comment">//正常 男</span><br>p1.age;			<span class="hljs-comment">//拦截  undefined</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面其实是有问题的，我们的p1做为代理对象应该去保护目标对象<code>obj</code>，但是结果并没有</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//本意是想让p1保护obj，但是现没有保护 </span><br><span class="hljs-comment">//我仍然可以通过下面的代码访问到目标对象</span><br>obj.password;<br>obj.height;<br></code></pre></td></tr></table></figure>

<p>怎么样让代理对象保护目标对象呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>((<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> &#123;<br>        <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>        <span class="hljs-attr">password</span>: <span class="hljs-string">&quot;123456&quot;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>,<br>        <span class="hljs-attr">sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>        <span class="hljs-attr">height</span>: <span class="hljs-number">170</span><br>    &#125;<br>&#125;)(), &#123;<br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p == <span class="hljs-string">&quot;userName&quot;</span> || p == <span class="hljs-string">&quot;sex&quot;</span>) &#123;<br>            <span class="hljs-comment">//正常给值</span><br>            <span class="hljs-keyword">return</span> target[p];<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">undefined</span>;<br>        &#125;<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">target, p, v</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p == <span class="hljs-string">&quot;userName&quot;</span> || p == <span class="hljs-string">&quot;sex&quot;</span>) &#123;<br>            target[p] = v;<br>        &#125;<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们的目标对象并没有暴露在外边，而是直接通过立即执行函数返回了一个对象，这样外部这访问不到目标对象，只能访问到代表对象p1了</p>
</blockquote>
<p><strong>通过代理实现私有属性</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> student = &#123;<br>    <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;男&quot;</span>,<br>    <span class="hljs-attr">age</span>:<span class="hljs-number">19</span>,<br>    <span class="hljs-attr">hobby</span>:<span class="hljs-string">&quot;读书，写作&quot;</span>,<br>    <span class="hljs-attr">IDCard</span>:<span class="hljs-string">&quot;345678199001011123&quot;</span>,<br>    <span class="hljs-attr">tel</span>:<span class="hljs-string">&quot;18736364567&quot;</span>,<br>    <span class="hljs-attr">address</span>:<span class="hljs-string">&quot;湖北省武汉市&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>我们现在希望实现一些私有化的属性，外部只能访问，不能赋值，怎么办呢，如IDCard不允许赋值，sex不能赋值，手机号tel也不能赋值</p>
<p>这个时候对象的定义可以定成如下方式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> student = &#123;<br>    <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;张三&quot;</span>,<br>    <span class="hljs-attr">_sex</span>:<span class="hljs-string">&quot;男&quot;</span>,<br>    <span class="hljs-attr">age</span>:<span class="hljs-number">19</span>,<br>    <span class="hljs-attr">hobby</span>:<span class="hljs-string">&quot;读书，写作&quot;</span>,<br>    <span class="hljs-attr">_IDCard</span>:<span class="hljs-string">&quot;345678199001011123&quot;</span>,<br>    <span class="hljs-attr">_tel</span>:<span class="hljs-string">&quot;18736364567&quot;</span>,<br>    <span class="hljs-attr">address</span>:<span class="hljs-string">&quot;湖北省武汉市&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>我们看到我们把那些不能赋值的属性前面都回了一个<code>_</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//以_开头的属性不让赋值</span><br><span class="hljs-keyword">let</span> student = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>((<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> &#123;<br>        <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;张三&quot;</span>,<br>        <span class="hljs-attr">_sex</span>: <span class="hljs-string">&quot;男&quot;</span>,<br>        <span class="hljs-attr">age</span>: <span class="hljs-number">19</span>,<br>        <span class="hljs-attr">hobby</span>: <span class="hljs-string">&quot;读书，写作&quot;</span>,<br>        <span class="hljs-attr">_IDCard</span>: <span class="hljs-string">&quot;345678199001011123&quot;</span>,<br>        <span class="hljs-attr">_tel</span>: <span class="hljs-string">&quot;18736364567&quot;</span>,<br>        <span class="hljs-attr">address</span>: <span class="hljs-string">&quot;湖北省武汉市&quot;</span><br>    &#125;<br>&#125;)(), &#123;<br>    <span class="hljs-comment">//取值操作代理</span><br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> target[p];<br>    &#125;,<br>    <span class="hljs-comment">//赋值操作代理</span><br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">target, p, v</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (!p.startsWith(<span class="hljs-string">&quot;_&quot;</span>)) &#123;<br>            target[p] = v;<br>        &#125;<br>    &#125;,<br>    <span class="hljs-comment">//删除操作代理</span><br>    <span class="hljs-function"><span class="hljs-title">deleteProperty</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p.startsWith(<span class="hljs-string">&quot;_&quot;</span>)) &#123;<br>            <span class="hljs-keyword">return</span>;<br>        &#125;<br>        <span class="hljs-keyword">else</span>&#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-keyword">delete</span> target[p];<br>        &#125;<br>    &#125;<br>&#125;);<br><br>student.age = <span class="hljs-number">20</span>;   <br>student._sex = <span class="hljs-string">&quot;女&quot;</span>;            <span class="hljs-comment">//赋值不成功，会被拦下来</span><br></code></pre></td></tr></table></figure>

<h3 id="能够执行代理的操作"><a href="#能够执行代理的操作" class="headerlink" title="能够执行代理的操作"></a>能够执行代理的操作</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">apply</span>(<span class="hljs-params">target: <span class="hljs-built_in">Function</span>, thisArgument: any, argumentsList: ArrayLike&lt;any&gt;</span>): <span class="hljs-title">any</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">construct</span>(<span class="hljs-params">target: <span class="hljs-built_in">Function</span>, argumentsList: ArrayLike&lt;any&gt;, newTarget?: <span class="hljs-built_in">Function</span></span>): <span class="hljs-title">any</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">defineProperty</span>(<span class="hljs-params">target: object, propertyKey: PropertyKey, attributes: PropertyDescriptor</span>): <span class="hljs-title">boolean</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">deleteProperty</span>(<span class="hljs-params">target: object, propertyKey: PropertyKey</span>): <span class="hljs-title">boolean</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get</span>(<span class="hljs-params">target: object, propertyKey: PropertyKey, receiver?: any</span>): <span class="hljs-title">any</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getOwnPropertyDescriptor</span>(<span class="hljs-params">target: object, propertyKey: PropertyKey</span>): <span class="hljs-title">PropertyDescriptor</span> | <span class="hljs-title">undefined</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPrototypeOf</span>(<span class="hljs-params">target: object</span>): <span class="hljs-title">object</span> | <span class="hljs-title">null</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">has</span>(<span class="hljs-params">target: object, propertyKey: PropertyKey</span>): <span class="hljs-title">boolean</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isExtensible</span>(<span class="hljs-params">target: object</span>): <span class="hljs-title">boolean</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ownKeys</span>(<span class="hljs-params">target: object</span>): (<span class="hljs-params">string | symbol</span>)[]</span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">preventExtensions</span>(<span class="hljs-params">target: object</span>): <span class="hljs-title">boolean</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">set</span>(<span class="hljs-params">target: object, propertyKey: PropertyKey, value: any, receiver?: any</span>): <span class="hljs-title">boolean</span></span>;<br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setPrototypeOf</span>(<span class="hljs-params">target: object, proto: object | <span class="hljs-literal">null</span></span>): <span class="hljs-title">boolean</span></span>;<br></code></pre></td></tr></table></figure>

<p><strong>简而言之，能够执行反射的方法就能够执行代理</strong></p>
<h3 id="可取消的代理"><a href="#可取消的代理" class="headerlink" title="可取消的代理"></a>可取消的代理</h3><p>正常情况下，我们可以代理一个对象，也可以取消这个代理，如果这个代理后期是要取消的，我们就不能用<code>new Proxy()</code>的方式来进行代理</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> huge = &#123;<br>    <span class="hljs-attr">userName</span>: <span class="hljs-string">&quot;胡歌&quot;</span>,<br>    <span class="hljs-attr">work</span>: <span class="hljs-string">&quot;拍戏&quot;</span>,<br>    <span class="hljs-attr">money</span>: <span class="hljs-number">5000</span>,<br>    <span class="hljs-attr">address</span>: <span class="hljs-string">&quot;上海市浦东新区&quot;</span><br>&#125;<br><br><span class="hljs-comment">//希望建一个可以取消的代理</span><br><span class="hljs-keyword">let</span> huge_proxy = <span class="hljs-built_in">Proxy</span>.revocable(huge, &#123;<br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> target[p];<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">target, p, v</span>)</span> &#123;<br>        target[p] = v;<br>    &#125;<br>&#125;);<br><span class="hljs-keyword">let</span> &#123;<br>    proxy,<br>    revoke<br>&#125; = huge_proxy;<br><span class="hljs-comment">//上面的proxy就是代理人,revoke是一个方法，调用这个方法以后就撤销了代理</span><br><span class="hljs-built_in">console</span>.log(proxy.userName);    <span class="hljs-comment">//正常执行 胡歌</span><br>proxy.money = <span class="hljs-number">20000</span>;<br><span class="hljs-comment">//huge_proxy.proxxy.money   这就是不解构的写法</span><br><br>revoke();       <span class="hljs-comment">//撤销了代理</span><br><span class="hljs-built_in">console</span>.log(proxy.userName);    <span class="hljs-comment">//报错</span><br></code></pre></td></tr></table></figure>

<h3 id="代理练习"><a href="#代理练习" class="headerlink" title="代理练习"></a>代理练习</h3><p>有一本书的属性为：{“name”:“《ES6基础系列》”, ”price”：56 }；要求使用Proxy对象对其进行拦截处理，name属性对外为“《ES6入门到懵逼》”,price属性为只读。（练习题）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> book_proxy = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>((<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> &#123;<br>        <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;《ES6基础系列》&quot;</span>,<br>        <span class="hljs-attr">price</span>: <span class="hljs-number">56</span><br>    &#125;<br>&#125;)(), &#123;<br>    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p == <span class="hljs-string">&quot;name&quot;</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;《ES6从入门到懵逼》&quot;</span>;<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">return</span> target[p];<br>        &#125;<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">target, p, v</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p != <span class="hljs-string">&quot;price&quot;</span>) &#123;<br>            target[p] = v;<br>        &#125;<br>    &#125;,<br>    <span class="hljs-function"><span class="hljs-title">deleteProperty</span>(<span class="hljs-params">target, p</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (p == <span class="hljs-string">&quot;price&quot;</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-keyword">delete</span> target[p];<br>        &#125;<br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="23-异步编程"><a href="#23-异步编程" class="headerlink" title="23.异步编程"></a>23.异步编程</h2><p>在之前的ES5里们，我们就已经接触过了异步的概念，并且得到了口诀 ：同步等待，异步执行<br>异步最大的缺点是无法得到返回值</p>
<p>之个问题我们在ES5里面的解决办法是使用回调函数来进行，在ES6里面。ES6不了解决这个异步，连续推出了多个版本的解决没兴趣</p>
<ol>
<li>回调函数</li>
<li>生成器函数</li>
<li>Promise</li>
<li>async/await</li>
</ol>
<p>异步一直是ES6里面的重难点，所以W3C针对异步编程总是在做优化</p>
<h3 id="回调函数处理异步"><a href="#回调函数处理异步" class="headerlink" title="回调函数处理异步"></a>回调函数处理异步</h3><p>在之前的ES5里面，最典型异步就是Ajax及定时器<code>settimeout/setinterval</code>，我们现在通过<code>setTimeout</code>来实实现一个异步场景</p>
<p>下面的代码是模板驾照考试的场景，我们全程使用了回调函数来进行了，我们先看代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//假设模似一个方华升考驾照的场景 </span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kemu1</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升在考科目一&quot;</span>);<br>    <span class="hljs-comment">//10秒钟以后才会得到成绩</span><br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>        <span class="hljs-keyword">let</span> result1 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">30</span>) + <span class="hljs-number">70</span>; <span class="hljs-comment">//随机产生一个成绩</span><br>        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> callBack == <span class="hljs-string">&quot;function&quot;</span>) &#123;<br>            callBack(result1);<br>        &#125;<br>    &#125;, <span class="hljs-number">2000</span>);<br>&#125;<br><br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kemu2</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升在考科目二&quot;</span>);<br>    <span class="hljs-comment">//10钟以后得到结果</span><br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>        <span class="hljs-keyword">let</span> result2 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>) + <span class="hljs-number">80</span>; <span class="hljs-comment">//随机产生一个成绩</span><br>        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> callBack == <span class="hljs-string">&quot;function&quot;</span>) &#123;<br>            callBack(result2);<br>        &#125;<br>    &#125;, <span class="hljs-number">2000</span>);<br>&#125;<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kemu3</span>(<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升在考科目三&quot;</span>);<br>    <span class="hljs-comment">//10钟以后得到结果</span><br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>        <span class="hljs-keyword">let</span> result3 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>) + <span class="hljs-number">80</span>; <span class="hljs-comment">//随机产生一个成绩</span><br>        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> callBack == <span class="hljs-string">&quot;function&quot;</span>) &#123;<br>            callBack(result3);<br>        &#125;<br>    &#125;, <span class="hljs-number">2000</span>);<br>&#125;<br><br><span class="hljs-comment">//上面的代码在定义的时候是没有任何问题的，关键看执行</span><br>kemu1(<span class="hljs-function"><span class="hljs-params">result1</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">if</span> (result1 &gt; <span class="hljs-number">89</span>) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的科目一考试成绩为<span class="hljs-subst">$&#123;result1&#125;</span>,请继续开始考试`</span>);<br>        kemu2(<span class="hljs-function"><span class="hljs-params">result2</span> =&gt;</span> &#123;<br>            <span class="hljs-keyword">if</span> (result2 &gt; <span class="hljs-number">79</span>) &#123;<br>                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的科目二考试成绩为<span class="hljs-subst">$&#123;result2&#125;</span>,请继续开始考试`</span>);<br>                kemu3(<span class="hljs-function"><span class="hljs-params">result3</span> =&gt;</span> &#123;<br>                    <span class="hljs-keyword">if</span> (result3 &gt; <span class="hljs-number">89</span>) &#123;<br>                        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的科目三考试成绩为<span class="hljs-subst">$&#123;result3&#125;</span>,考试结束，恭喜拿到驾照`</span>);<br>                    &#125; <span class="hljs-keyword">else</span> &#123;<br>                        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你科目三考试成绩为<span class="hljs-subst">$&#123;result3&#125;</span>,成绩不合格，请回中心打印成绩单`</span>);<br>                    &#125;<br>                &#125;)<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你科目二考试成绩为<span class="hljs-subst">$&#123;result2&#125;</span>,成绩不合格，请回中心打印成绩单`</span>);<br>            &#125;<br>        &#125;);<br>    &#125; <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你科目一考试成绩为<span class="hljs-subst">$&#123;result1&#125;</span>,成绩不合格，请回中心打印成绩单`</span>);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>使用回调来处理异步非常简单，但是也容易产生一个问题，它会形成一个<strong>回调地狱</strong>，因为每一次的回调都要形成一个嵌套</p>
<h3 id="Promise原理"><a href="#Promise原理" class="headerlink" title="Promise原理"></a>Promise原理</h3><p>Promise全称叫承诺，它是ES6里面用于处理异步的关键点，也是一个非常重要的一个点。</p>
<p>Promise是一个承诺，只要是开启这个承诺就一定会得到结果，无论这个结果是好的结果还是坏的结果</p>
<p>Promise是需要经过new来进行创建的，默认创建的时候，里面有一个状态叫<code>pending</code>等状态，当异步得到的结果以后就将这个状态转变成成功<code>resolve/fulfilled</code>或失败<code>reject</code></p>
<blockquote>
<p>三个状态 pending等待、fulfilled成功、rejected失败</p>
</blockquote>
<pre><code class=" mermaid">graph TD
A[pending等待状态]--&gt;|成功|B[resolve]
A--&gt;|失败|C[reject]
B--&gt;|执行|D[then]
C--&gt;|执行|E[catch]
</code></pre>

<p>通过上面的过程，我们可以写出如下的做对</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kemu1</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升在考科目一&quot;</span>);<br>    <span class="hljs-comment">//我给你一个承诺，如果有结果 ，我立即告诉你</span><br>    <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> result1 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>) + <span class="hljs-number">80</span>;<br>            <span class="hljs-keyword">if</span> (result1 &gt;= <span class="hljs-number">90</span>) &#123;<br>                <span class="hljs-comment">//成功</span><br>                resolve(result1);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                <span class="hljs-comment">//失败</span><br>                reject(result1);<br>            &#125;<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;);<br>    <span class="hljs-comment">//把承诺返回到外边</span><br>    <span class="hljs-keyword">return</span> p;<br>&#125;<br><br><span class="hljs-keyword">let</span> p1 = kemu1();<br><span class="hljs-comment">//p1就是方华升考试的承诺 ，如果成功了</span><br>p1.then(<span class="hljs-function"><span class="hljs-params">result1</span> =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的科目一成绩合格<span class="hljs-subst">$&#123;result1&#125;</span>`</span>);<br>&#125;).catch(<span class="hljs-function"><span class="hljs-params">result1</span> =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的科目一成绩为<span class="hljs-subst">$&#123;result1&#125;</span>,不合格`</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>Promise默认是<code>pending</code>的等待状态，如果成功了就调用<code>resolve()</code>的方法将状态转换成成功，程序会自动执行<code>then()</code>里面的东西，如果失败了，则调用<code>reject()</code>的方法将状态转换成为失败，程序会自动执行<code>catch</code>里面的方法</p>
<p>Promise里面的状态是不可逆的，如果由pending转向了<code>resolve()</code>而不能再转向<code>reject()</code>，同理，如果向了<code>reject()</code>则不能再转向<code>resolve()</code></p>
</blockquote>
<hr>
<p>在上面的代码里面，我们只使用了一个<code>Promise</code>，现在我们要考虑一下，如果有多次考试，怎么办呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> kemu1 = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升开始科目一的考试&quot;</span>);<br>    <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> result1 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>) + <span class="hljs-number">80</span>;<br>            <span class="hljs-keyword">if</span> (result1 &gt;= <span class="hljs-number">90</span>) &#123;<br>                resolve(result1);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                reject(result1);<br>            &#125;<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;);<br>    <span class="hljs-keyword">return</span> p;<br>&#125;<br><br><span class="hljs-keyword">const</span> kemu2 = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升开始科目二的考试&quot;</span>);<br>    <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> result2 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">30</span>) + <span class="hljs-number">70</span>;<br>            <span class="hljs-keyword">if</span> (result2 &gt;= <span class="hljs-number">80</span>) &#123;<br>                resolve(result2);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                reject(result2);<br>            &#125;<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;);<br>    <span class="hljs-keyword">return</span> p;<br>&#125;<br><br><span class="hljs-comment">//-----------------------</span><br>kemu1()<br>    .then(<span class="hljs-function"><span class="hljs-params">result1</span> =&gt;</span> &#123;<br>        <span class="hljs-comment">//能够进入到这里，说明科目一成功了</span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`科目一考试成功，成绩为<span class="hljs-subst">$&#123;result1&#125;</span>`</span>);<br>        <span class="hljs-keyword">let</span> p2 = kemu2(); <span class="hljs-comment">//开启科目二考试，得到一个承诺</span><br>        <span class="hljs-keyword">return</span> p2; <span class="hljs-comment">//将p2的这个承诺直接返回出去</span><br>    &#125;)<br>    .then(<span class="hljs-function"><span class="hljs-params">result2</span> =&gt;</span> &#123;<br>        <span class="hljs-comment">//这里得到了就是p2的resolve了</span><br>        <span class="hljs-comment">//能够进入到这里，就说明科目二成功了</span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`科目二考试成功，成功为<span class="hljs-subst">$&#123;result2&#125;</span>`</span>);<br>    &#125;)<br>    .catch(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> &#123;<br>        <span class="hljs-comment">//所有的考试失败都在这里面</span><br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的考试失败了，成绩为<span class="hljs-subst">$&#123;error&#125;</span>`</span>);<br>    &#125;);<br></code></pre></td></tr></table></figure>

<h3 id="Promise-all"><a href="#Promise-all" class="headerlink" title="Promise.all()"></a>Promise.all()</h3><blockquote>
<p>此方法可以将多个Promise实现串行效果，全部执行完成再执行后续操作，rejected就返回第一个rejected的Promise</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> promise1=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">let</span> str=<span class="hljs-string">&quot;完成1！&quot;</span><br>        resolve(str)<br>    &#125;,<span class="hljs-number">3000</span>)<br>&#125;)<br><span class="hljs-keyword">let</span> promise2=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">let</span> str=<span class="hljs-string">&quot;完成2！&quot;</span><br>        resolve(str)<br>    &#125;,<span class="hljs-number">2000</span>)<br>&#125;)<br><span class="hljs-keyword">let</span> promise3=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">let</span> str=<span class="hljs-string">&quot;完成3！&quot;</span><br>        resolve(str)<br>    &#125;,<span class="hljs-number">1000</span>)<br>&#125;)<br><span class="hljs-keyword">let</span> promiseArr=[<br>    promise1,<br>    promise2,<br>    promise3<br>]<br><span class="hljs-comment">// 串行效果，所有都完成时打印   失败时返回第一个失败的</span><br><span class="hljs-built_in">Promise</span>.all(promiseArr).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(res);  <span class="hljs-comment">//所有完成后打印  [&#x27;完成1！&#x27;, &#x27;完成2！&#x27;, &#x27;完成3！&#x27;]</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="Promise-race"><a href="#Promise-race" class="headerlink" title="Promise.race()"></a>Promise.race()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> promise1=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">let</span> str=<span class="hljs-string">&quot;完成1！&quot;</span><br>        resolve(str)<br>    &#125;,<span class="hljs-number">3000</span>)<br>&#125;)<br><span class="hljs-keyword">let</span> promise2=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">let</span> str=<span class="hljs-string">&quot;完成2！&quot;</span><br>        resolve(str)<br>    &#125;,<span class="hljs-number">2000</span>)<br>&#125;)<br><span class="hljs-keyword">let</span> promise3=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">()=&gt;</span>&#123;<br>        <span class="hljs-keyword">let</span> str=<span class="hljs-string">&quot;完成3！&quot;</span><br>        resolve(str)<br>    &#125;,<span class="hljs-number">1000</span>)<br>&#125;)<br><span class="hljs-keyword">let</span> promiseArr=[<br>    promise1,<br>    promise2,<br>    promise3<br>]<br><span class="hljs-comment">// 并行 哪个最先执行完就返回哪个  无论成功还是失败</span><br><span class="hljs-built_in">Promise</span>.race(promiseArr).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(res);   <span class="hljs-comment">//完成3！   </span><br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="async及await"><a href="#async及await" class="headerlink" title="async及await"></a>async及await</h3><p>在之前的ES6里面，我们已经使用<code>Promise</code>来完成了我们的异步操作，通过<code>resolve</code>及<code>reject</code>来实现的状态改变，进而调用<code>then</code>或<code>catch</code>方法。但是这两个方法内部仍然有回调函数，所以ES7又将这个东西进行了升级，添加了两个新的关键字，就是<code>async</code>与<code>await</code>，它们是一对，有<code>await</code>必须有<code>async</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">kemu1</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升在考科目一&quot;</span>);<br>    <span class="hljs-comment">//我给你一个承诺，如果有结果 ，我立即告诉你</span><br>    <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> result1 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>) + <span class="hljs-number">80</span>;<br>            <span class="hljs-keyword">if</span> (result1 &gt;= <span class="hljs-number">90</span>) &#123;<br>                <span class="hljs-comment">//成功</span><br>                resolve(result1);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                <span class="hljs-comment">//失败</span><br>                reject(result1);<br>            &#125;<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;);<br>    <span class="hljs-comment">//把承诺返回到外边</span><br>    <span class="hljs-keyword">return</span> p;<br>&#125;<br><br><br><span class="hljs-comment">// let p1 = kemu1();    这个方法默认返回的是一个承诺</span><br><br><span class="hljs-keyword">const</span> abc = <span class="hljs-keyword">async</span> () =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-comment">//await等待的只能是一个Promise</span><br>        <span class="hljs-comment">//await只能待到resolve成功的结果</span><br>        <span class="hljs-keyword">let</span> result1 = <span class="hljs-keyword">await</span> kemu1();<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你科目一考试成功了，成绩为<span class="hljs-subst">$&#123;result1&#125;</span>`</span>);<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`你的科目一成绩为<span class="hljs-subst">$&#123;error&#125;</span>,不合格`</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/616122442ab3f51d9131de43.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211008150208003"></p>
<ul>
<li><code>await</code>必须与<code>async</code>结合使用</li>
<li><code>await</code>只能等待<code>Promise</code>，并且只能等待成功以后的<code>resolve</code>的结果</li>
<li>失败的结果在<code>catch</code>里面</li>
</ul>
<p>下面是将多个<code>Promise</code>转向<code>await</code>的写法，可以参考上面Promise的代码进行对比</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> kemu1 = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升开始科目一的考试&quot;</span>);<br>    <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> result1 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">20</span>) + <span class="hljs-number">80</span>;<br>            <span class="hljs-keyword">if</span> (result1 &gt;= <span class="hljs-number">90</span>) &#123;<br>                resolve(result1);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                reject(result1);<br>            &#125;<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;);<br>    <span class="hljs-keyword">return</span> p;<br>&#125;<br><br><span class="hljs-keyword">const</span> kemu2 = <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;方华升开始科目二的考试&quot;</span>);<br>    <span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> result2 = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">30</span>) + <span class="hljs-number">70</span>;<br>            <span class="hljs-keyword">if</span> (result2 &gt;= <span class="hljs-number">80</span>) &#123;<br>                resolve(result2);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                reject(result2);<br>            &#125;<br>        &#125;, <span class="hljs-number">2000</span>);<br>    &#125;);<br>    <span class="hljs-keyword">return</span> p;<br>&#125;<br><br><span class="hljs-comment">//-----------------------</span><br><span class="hljs-keyword">const</span> abc = <span class="hljs-keyword">async</span> () =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-keyword">let</span> result1 = <span class="hljs-keyword">await</span> kemu1();<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`科目一考试成功，分数为<span class="hljs-subst">$&#123;result1&#125;</span>`</span>);<br>        <span class="hljs-keyword">let</span> result2 = <span class="hljs-keyword">await</span> kemu2();<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`科目二考试成功，分数为<span class="hljs-subst">$&#123;result2&#125;</span>`</span>);<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`考试失败，你的成绩为<span class="hljs-subst">$&#123;error&#125;</span>`</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="24-ESModule模块化"><a href="#24-ESModule模块化" class="headerlink" title="24.ESModule模块化"></a>24.ESModule模块化</h2><p>在之前的ES5里面，我们所有的JS文件如果要进行汇总应该都是通过<code>&lt;script&gt;</code>的<code>src</code>属性引入到浏览器的HTML页面当中执行，但是这做有2个缺点</p>
<ol>
<li>如果直接放在<code>index.html</code>里面，这个时候我们根据本不知道这个JS文件后期被谁引用了，因为只要放在HTML文件里面以后，任何JS文件都可以使用，这样会出现引用不清的关系</li>
<li>如果万一没有HTML文件了呢？例如在node.js里面，它没有HTML标签，这个时候就不能实现功能了</li>
</ol>
<p>所以为了解决上面的问题，W3C就推出了模块化的概念</p>
<p>目前的模块化标准有很多，我们可以大致分为现行标准和过时标准</p>
<pre><code class=" mermaid">graph TD
A[模块化]--&gt;B[过时标准]
A--&gt;C[现行标准]
B--&gt;B1(AMD规范)
B--&gt;B2(CMD规范)
C--&gt;|浏览器及通用EMCA|C1[ESModule规范]
C--&gt;|node.js平台|C2[CommonJS规范]
</code></pre>



<p>在ESModule里面主要实现的的模块化只有两个关键字，一个就是<code>export</code>导出，一个就是<code>import</code>导入</p>
<p><strong>Person.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.userName = userName;<br>        <span class="hljs-built_in">this</span>.sex = sex;<br>    &#125;<br>    <span class="hljs-function"><span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`大家好!我叫<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.userName&#125;</span>，性别为<span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.sex&#125;</span>`</span>);<br>    &#125;<br>&#125;<br><span class="hljs-comment">//默认导出了Person</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Person;<br></code></pre></td></tr></table></figure>

<p><strong>Student.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 当前的Studnet是要引入当前文件夹下面的Person.js</span><br><span class="hljs-keyword">import</span> Person <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./Person.js&quot;</span>;<br><span class="hljs-comment">//导入以后就可以使用别人</span><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Student</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">userName, sex, age, sid</span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>(userName, sex);<br>        <span class="hljs-built_in">this</span>.age = age;<br>        <span class="hljs-built_in">this</span>.sid = sid;<br>    &#125;<br>&#125;<br><span class="hljs-comment">//导出以后别人就可以使用</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Student;<br></code></pre></td></tr></table></figure>

<p><strong>index.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//希望创建一个学生，怎么办？</span><br><span class="hljs-keyword">import</span> Student <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./Student.js&quot;</span>;<br><br><span class="hljs-keyword">let</span> s1 = <span class="hljs-keyword">new</span> Student(<span class="hljs-string">&quot;张珊&quot;</span>, <span class="hljs-string">&quot;女&quot;</span>, <span class="hljs-number">18</span>, <span class="hljs-string">&quot;H21030003&quot;</span>);<br>s1.sayHello();<br></code></pre></td></tr></table></figure>

<p><strong>index.html文件</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- </span><br><span class="hljs-comment">    &lt;script src=&quot;./js/index.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; </span><br><span class="hljs-comment">    type=&quot;text/javascript&quot;它是不支持模块化的</span><br><span class="hljs-comment">    如果你的JS代码是模块化开发，则应该是另一种格式</span><br><span class="hljs-comment">--&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/index.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">graph LR
A[index.html]--&gt;B[index.js]--&gt;C[Student.js]--&gt;D[Person.js]
</code></pre>



<h2 id="25-CommonJS模块化"><a href="#25-CommonJS模块化" class="headerlink" title="25.CommonJS模块化"></a>25.CommonJS模块化</h2><p>在Node.js笔记中…</p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/ES6/">ES6</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/11/16/MySQL%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">MySQL笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/10/06/JQuery%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">JQuery笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
